Mobil cihazlar aracılığıyla birçok çözünürlüğe uyacak şekilde css'de çapraz bir çizgi ayarlama konusunda yardıma ihtiyacım var. % 100 genişliğe sahip bir div ve bu div içindeki yerinde kalması gereken bir çapraz çizgi var, ancak pencerenin çözünürlüğünü her değiştirdiğimde çizgi yukarı ya da aşağı gidiyor. Yapabileceğim bir şey olmalı.Duyarlı diyagonal çizgiler css
İşte bir örnek:
.wrapper
{
width: 100%;
position: relative;
border: 1px solid red;
overflow: hidden;
padding-bottom: 12px;
}
.upper-triangle
{
-moz-transform: rotate(-3.5deg);
-o-transform: rotate(-3.5deg);
-webkit-transform: rotate(-3.5deg);
-ms-transform: rotate(-3.5deg);
transform: rotate(-3.5deg);
border-color: black;
border-style: solid;
border-width:2px;
position: relative;
top: -21px;
zoom: 1;
width: calc(100% - -2px);
right: 1px;
}
.arrow-wrapper
{
position: absolute;
top: 41px;
left: 22px;
z-index: 1;
}
.arrow-wrapper::before
{
border-style: solid;
border-width: 16px 0px 0px 20px;
border-color: transparent transparent transparent black;
position: absolute;
content: "";
}
.arrow-wrapper::after
{
position: absolute;
content: "";
width: 0;
height: 0;
margin-top: 8px;
margin-left: 4px;
border-style: solid;
border-width: 16px 0 0 20px;
border-color: transparent transparent transparent white;
}
HTML:
<div class="wrapper">
<div class="headline">
<img class="image" width="36" height="36"/>
</div>
http://jsfiddle.net/MkEJ9/417/
Bkz. Http://stackoverflow.com/questions/9990928/how-to-create-a-page-thats-split-diagonally-and-the-two-halves-are-clickable-li yararlı – fcalderan
Lila Bu soru süper duper, ben soo onu okumak için heyecanlandım –