How to do this effect with CSS

Asked

Viewed 155 times

3

inserir a descrição da imagem aqui

I need to do those corners on div footnote.

I tried to scheme the triangles using pseudo-element, but I couldn’t.

border-top: 30px solid @Laranja;
border-right: 30px transparent @Laranja;
border-left: 30px transparent @Laranja;

Is there any way ?

css

  • Something like that would serve ? http://www.w3schools.com/css/css3_borders.asp

  • But it’s not round, it’s square. It doesn’t have a border-square ?

  • I found some similar, but nothing like how you want https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

  • Have you tried creating an element for each tip and rotating a few degrees?

2 answers

8


Use CSS gradients:

div {
    background: orange; /* fallback */
    background:
        -moz-linear-gradient(225deg, transparent 10px, orange 10px),
        -moz-linear-gradient(315deg, transparent 10px, orange 10px);
    background:
        -o-linear-gradient(225deg, transparent 10px, orange 10px),
        -o-linear-gradient(315deg, transparent 10px, orange 10px);
    background:
        -webkit-linear-gradient(225deg, transparent 10px, orange 10px),
        -webkit-linear-gradient(315deg, transparent 10px, orange 10px);
}



div {
    background-position: top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}


div {
    float:left;
    margin:15px auto;
    padding:15px;
    color: white;
    line-height:1.5;
    height:200px;
}
<div style='width:95%'>Div 1</div>

Source:

https://stackoverflow.com/questions/14770312/how-to-achieve-chamfered-css-border-corners-rather-than-rounded-corners

  • I need without the bottom. Only the top with these corners.

  • @Deesouza just remove the backgrounds positioned in the lower corners. I edited the answer.

2

It’s easier to use SVG than trying to do everything with CSS.

polygon { fill: #F7941D }
text    { fill: #000    }
<svg width='600' height='200'>
  <g>
    <polygon points='0,20 20,0 580,0 600,20 600,180 600,200 0,200 0,180'/>
    <text x='245' y='110'>StackOverflow</text>
  </g>
</svg>

The attribute points tag <polygon> represent the coordinates on the axis x and y, respectively. At this link of W3cshool there are some examples of what is possible to do by defining the coordinates of a polygon.

To include a text, you can use the tag <text>.

  • Right, but there’s a way I can put text content inside that SVG ?

  • 1

    This kind of thing is good for you to include while you’re asking, also because you only asked for the image. These are different questions, but I’ll edit my answer.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.