我正在尝试制作一个倾斜的盒子(基本上由一个中心 block 元素和::before &::after 倾斜盒子元素组成)。问题是我的倾斜框在 Chrome/Firefox 中看起来不错,但正确的 (::after) 倾斜 div 在 Safari 中似乎无法正常工作。任何帮助将不胜感激。
.slanted-box {
position: relative;
display: inline-block;
height: 75px;
text-align: center;
margin: 0 auto 20px auto;
font-size: 16px;
}
.slanted-box p {
margin: 0;
padding: 0 15px;
line-height: 75px;
font-weight: bold;
width: auto;
font-style: italic;
font-size: 4em;
}
.slanted-box-white {
background-color: rgb(214, 214, 214);
}
.slanted-box-white p {
color: black;
}
.slanted-box::before {
content: '';
height: 75px;
width: 15px;
position: absolute;
bottom: 0;
left: 0;
right: auto;
transform: skewX(-10deg);
transform-origin: top;
-webkit-transform: skewX(-10deg);
-webkit-transform-origin: 0 0 0 0;
}
.slanted-box-white::before {
background-color: rgb(214, 214, 214);
}
.slanted-box-white::after {
background-color: rgb(214, 214, 214);
}
.slanted-box::after {
content: '';
height: 75px;
width: 15px;
position: absolute;
bottom: 0;
right: 0;
left: auto;
transform: skewX(-10deg);
transform-origin: bottom;
-webkit-transform: skewX(-10deg);
-webkit-transform-origin: 0 0 0 0;
}
<div class="slanted-box slanted-box-white">
<p>
CAN A <span style="color:#A602B9"><span id="ticker" style="display: inline;">TACTIC</span></span>
</p>
</div>
JSFiddle: https://jsfiddle.net/Hybridx24/8j101ux9/
最佳答案
将 -webkit-transform-origin: 0 0 0 0;
更改为 -webkit-transform-origin: top;
for .slanted-box::在
css 之前。
将 -webkit-transform-origin: 0 0 0 0;
更改为 -webkit-transform-origin: bottom;
for .slanted-box::在
css 之后。
检查一下。我没有在 Safari 上测试过,但它应该可以工作。
关于html - 倾斜框在 Safari/iOS 浏览器中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35709886/