Próbuję odtworzyć ten kształt w CSS3.Odtwarzanie kształtu przycisku o trójkątnym zakończeniu w CSS3
To było moje rozwiązanie:
<span><div id="shape"></div></span>
span {
display: block;
margin-left: 88px;
}
#shape {
width: 160px;
height: 100px;
background: #dcdcdc;
}
#shape:before {
height: 76px;
width: 76px;
top: 20px;
content:"";
position: absolute;
border-radius: 10px;
background-color: #ccc;
left: 60px;
-webkit-transform:rotate(45deg);
}
#shape:after {
height: 76px;
width: 76px;
top: 20px;
content:"";
position: absolute;
border-radius: 10px;
left: 220px;
-webkit-transform:rotate(45deg);
background-color: #ccc;
}
Niestety, nie skaluje: CodePen demo (I zmienił kolory tła, aby zilustrować jak ja go). Ważne jest, aby skalować pionowo.
Rozwiązanie JavaScript też by działało.
Masz już obraz tego, co chcesz. Dlaczego po prostu nie możesz tego użyć (po obcięciu szarego tła)? Możesz użyć wielu rozmiarów strony. – 11684
jak chcesz skalować? –
Niestety, jQuery nie może bezpośrednio ustawić wysokości pseudoelementów, lub byłbyś w stanie ustawić ją za pomocą jQuery. Jeśli chcesz dodać inne elementy HTML, będzie to łatwe dzięki jQuery. – robooneus