Бих искал да направя форма, където горната част е изкривена -10 градуса, а долната част е 10 градуса, за да произведа формата, както се вижда на снимката:
Изглежда не мога да разбера как да постигна това.
Бих искал да направя форма, където горната част е изкривена -10 градуса, а долната част е 10 градуса, за да произведа формата, както се вижда на снимката:
Изглежда не мога да разбера как да постигна това.
Това трябва да свърши работа:
CSS
#test {
width: 200px;
height: 200px;
-webkit-transition: all 300ms ease-in;
background: black;
position: relative;
}
#test:after, #test:before {
display: block;
content: "";
color: transparent;
width: 215px;
height: 50px;
background: white;
position: absolute;
left: -10px;
bottom: -20px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
}
#test:before {
bottom: auto;
top: -20px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
HTML
<div id="test"></div>