Put border on a shape

Question

i'm trying to insert a border to a css shape that i created.

Here the css shape that i created

Here what happens when i insert the border

What do i need to change on my css?

.jologo{
   width: 200px;
   height: 0; 
   border-bottom: 40px solid #262627;
   border-left: 5px solid #f15c5c;
   border-right: 40px solid transparent;

}

Thanks

I already did it, i inserted a span inside the div, and i inserted the border inside this span, now is working. — user3610021, May 10 '14 at 20:53

score 2 · Accepted Answer · edited May 23 '17 at 12:21

2

Without changing the HTML, you could always add the border via an absolutely pseudo element. Just be sure to relatively position the parent element. (example)

.jologo:after {
    content:'';
    position:absolute;
    background:#f15c5c;
    height:40px;
    left:0;
    width:5px;
}

The reason your border wasn't working was because this is how borders are added to elements:

enter image description here

As a result, you will get a border that is skewed if the height of the element is 0.

edited May 23 '17 at 12:21

Community

1
1

answered May 10 '14 at 20:55

Josh Crozier

233,099
56
391
304

Nice, i will thumbs up your question – user3610021 May 10 '14 at 20:57

Put border on a shape

1 Answers1