我需要在CSS中设置对角线以通过手机适应多种分辨率的帮助。有一个宽度为100％的div和一条对角线，应该保留在该div内的位置，但是每次更改窗口的分辨率时，该线就会上下移动。我一定有办法做
这里是一个例子：
.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>
您需要从哪里应用旋转设置锚点。您的变换正在更改位置，因为默认情况下它从中心枢转，在这种情况下，这不是您想要的。
在您的CSS中使用：
.upper-triangle {
...
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
...
}
检查此更新的提琴：http : //jsfiddle.net/MkEJ9/420/
注意：在您的小提琴中，我不得不将更top改为10px。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句