CSS Polygons
Out of context: Reply #3
- Started
- Last post
- 6 Responses
- voiceof0
You can do something like this:
$your-shape-height: 2.5em;
$your-shape-bg-color: #333;
$your-shape-max-width: 18.750em;.your-shape {
position: relative;
display: block;
height: $your-shape-height;
width: 80%;
max-width: $your-shape-max-width - $your-shape-height;
color: #fff;
line-height: $your-shape-height;
background-color: $your-shape-bg-color;
text-align: center;
margin: 30px;&:before, &:after {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: ($your-shape-height / 2);
border-color: transparent;
}&:after {
right: ($your-shape-height / 2) * -1;
border-right-width: 0;
border-left-color: $your-shape-bg-color !important;
}&:before {
left: ($your-shape-height / 2) * -1;
border-left-width: 0;
border-right-color: $your-shape-bg-color !important;
}}
This way you can add text if you like.