параллелограмм
?> Обзор темы: 
transform, clip-path
<script v-pre type="text/x-template" id="parallelogram">
<style>
main {
width: 100%;
padding: 29px 0 0;
}
.rhombus {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
}
.rhombus > div {
width: 150px;
color: white;
display: inherit;
justify-content: center;
align-items: center;
position: relative;
}
.rhombus:nth-of-type(1) > div {
transform: skewX(-45deg);
background: #b4a078;
}
.rhombus:nth-of-type(1) > div > span {
transform: skewX(45deg);
}
.rhombus:nth-of-type(2) > div::before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
z-index: -1;
transform: skewX(-45deg);
background: #b4a078;
}
.rhombus:nth-of-type(3) > div {
width: 105px; height: 105px;
border: 29px solid transparent;
box-sizing: content-box;
}
.rhombus:nth-of-type(3) > div::before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
z-index: -1;
background: #b4a078;
transform: rotate(45deg);
}
.rhombus:nth-of-type(3) {
margin-bottom: 0;
align-items: center;
justify-content: space-around;
border-bottom-color: transparent;
}
.rhombus:nth-of-type(3) > img {
width: 300px; height: 150px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s clip-path;
}
.rhombus:nth-of-type(3) > img:hover {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
</style>
① Вложенные элементы
ромб
② Псевдоэлементы (рекомендовано)
ромб
ромб
<script>
</script>
</script>
Поддержка браузерами<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=transforms2d&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="458px"></iframe>
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-clip-path&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>
Опубликовать ( 0 )