I need to make those corners in div of the footer.
I tried to do the triangulation scheme using pseudo-element , but I could not.
border-top: 30px solid @Laranja;
border-right: 30px transparent @Laranja;
border-left: 30px transparent @Laranja;
Is there anyway?
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:
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 points attribute of the tag <polygon> represents the coordinates in the axis x and y , respectively. In this link of W3Cshool there are some examples of what you can do by setting the coordinates of a polygon.
To include text, you can use the <text> tag.