半透明倾斜背景
半透明倾斜背景
提问于 2015-05-04 17:13:30
我想创建一个html元素，例如div，它的样式如下：
- semi-transparent background-color
- rounded所有边的边框
- 左侧绘制直线
- 右侧绘制斜线
我只想在CSS中创建它，不知道这是否可能。到目前为止，我提出了两种不同的方法，它们都有自己的缺点，而且还不够充分。你可以看看这个小提琴中的那些：
https://jsfiddle.net/n4tecna3/
.one-side-skew-1,
.one-side-skew-2 {
font-size: 20px;
padding: 2%;
background-color: rgba(220, 50, 255, 0.6);
position: relative;
display: block;
border-radius: 4px;
z-index: 2;
color: #ffffff;
margin-top: 30px;
}
.one-side-skew-2 {
border-top-right-radius: 0px;
}
.one-side-skew-1:after {
height: 100%;
width: 20%;
position: absolute;
top: 0;
left: 85%;
display: inline-block;
content: "";
background-color: rgba(220, 50, 255, 0.6);
-moz-transform: skewX(-10deg);
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
-o-transform: skewX(-10deg);
transform: skewX(-10deg);
z-index: -1;
border-radius: 4px;
}
.one-side-skew-2:after {
border-top: 1em solid rgba(220, 50, 255, 0.6);
border-left: 0.25em solid rgba(220, 50, 255, 0.6);
border-right: 0.25em solid transparent;
border-bottom: 1em solid transparent;
border-top-right-radius: 4px;
left: 100%;
display: inline-block;
position: absolute;
content: "";
top: 0;
}
.container {
width: 500px;
}<div class="container">
<div class="one-side-skew-1">
<span class="inner-text">One Side Skew With Pseudo Element Skewed</span>
</div>
<div class="one-side-skew-2">
<span class="inner-text">One Side Skew With Pseudo Element Border</span>
</div>
</div>
方法1 .one-side-skew-1使用一个具有圆形边框的div元素和一个倾斜的、有圆角边界的伪元素来创建一个单侧倾斜的元素。只要背景色是纯色，这个效果就很好。对于半透明的背景，你会看到一个丑陋的颜色重叠在元素和它的伪元素相交的地方。
方法2 .one-side-skew2使用一个后面带有伪元素的div元素，该元素仅由边框组成。这有点老生常谈，但接近了我想要的结果。尽管如此，右翼看起来并不像第一种方法那样流畅。
对于这个问题，是否有人只在CSS中有好的解决方案？或者我必须使用带有半透明背景图像的后备解决方案来解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-04 17:23:12
您可以对所有背景使用伪元素，并使用该元素上的overflow属性隐藏溢出部分。
这将防止元素和伪元素背景重叠，并允许半透明背景：
div {
position: relative;
width: 250px;
font-size: 20px;
border-radius: 4px;
overflow: hidden;
color: #fff;
padding: 1% 2%;
}
div:before {
content: '';
position: absolute;
top: 0; right: 0;
width: 100%; height: 100%;
background: rgba(220, 50, 255, 0.6);
-webkit-transform-origin:100% 0;
-ms-transform-origin:100% 0;
transform-origin: 100% 0;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
border-radius: 4px 4px 6px;
z-index: -1;
}
/** FOR THE DEMO **/body {background: url('http://lorempixel.com/output/people-q-g-640-480-3.jpg');background-size: cover;}<div>content</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30026450
复制相关文章
相似问题
腾讯云开发者
