CSS Polygons
- 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.
- moniker0
button {
width: 150px;
height: 100px;
background: #000;
-webkit-clip-path: polygon(0 50%, 10% 35%, 90% 35%, 100% 50%, 90% 65%, 10% 65%);
clip-path: polygon(0 50%, 10% 35%, 90% 35%, 100% 50%, 90% 65%, 10% 65%);
}
- voiceof1
@dbloc, Here's the vanilla css version.
.your-shape {
position: relative;
display: block;
height: 2.5em;
width: 80%;
max-width: 16.25em;
color: #fff;
line-height: 2.5em;
background-color: #333;
text-align: center;
}
.your-shape:before,
.your-shape:after {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 1.25em;
border-color: transparent;
}.your-shape:after {
right: -1.25em;
border-right-width: 0;
border-left-color: #333 !important;
}.your-shape:before {
left: -1.25em;
border-left-width: 0;
border-right-color: #333 !important;
}- Who's Awesome? You're Awesome. Thanks You Sir!dbloc
- he went vanilla for you.bklyndroobeki