在背景图片上创建一个透明 CSS 三角形
Creating a transparent CSS triangle over a background image
我正在背景图片上做一个分隔线,中间有一条线和一个指针,表示要往下看。这只是一根线,所以分隔线不是实心的。当我制作分隔线时,父级的边框穿过三角形,因为背景是透明的。
看看我要解释的内容:
我希望三角形隐藏中间的那条线。这就是我创建分隔线的方式:
<div class="splash">
<div class="splash-divider">
</div>
</div>
.splash {
background: url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
height: 200px;
}
.splash-divider {
position: relative;
margin: 20px auto 0 auto;
width: 50%;
height: 30px;
border-bottom: 1px solid #ffffff;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
}
.splash-divider:after {
content: "";
position: absolute;
top: 15px;
left: 50%;
width: 30px;
height: 30px;
border-left: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.15);
transform: rotate(-45deg) translate(-50%, -50%);
-webkit-transform: rotate(-45deg) translate(-50%, -50%);
-ms-transform: rotate(-45deg) translate(-50%, -50%);
-moz-transform: rotate(-45deg) translate(-50%, -50%);
-o-transform: rotate(-45deg) translate(-50%, -50%);
}
如您所见,父级包含背景图片。如果它只是一种颜色,这将是非常简单的。
这是fiddle。
编辑
已解决!这是工作 fiddle:http://jsfiddle.net/a9fkh0tp/1/
有可能,看现场演示:http://jsfiddle.net/a9fkh0tp/1/
.splash {
background: url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
height: 200px;
}
.splash-divider {
position: relative;
margin: 20px auto 0 auto;
width: 50%;
height: 30px;
border-bottom: 1px solid transparent;
}
.splash-divider:after {
content: "";
position: absolute;
top: 15px;
left: 50%;
width: 30px;
height: 30px;
border-left: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.15);
transform: rotate(-45deg) translate(-50%, -50%);
}
.splash-divider span:before,
.splash-divider span:after {
position: absolute;
top: 0;
display: inline-block;
content: "";
width: 50%;
height: 30px;
border-bottom: 1px solid #fff;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
}
.splash-divider span:before {
left: -28px;
}
.splash-divider span:after {
right: -16px;
}
<div class="splash">
<div class="splash-divider"><span></span></div>
</div>
想法是将单行分成两部分(左+右)。为此,请将 <span>
添加到 <div>
中,这样 <div class="splash-divider"><span></span></div>
我们就可以使用它进行更多操作了。
你也可以使用带有伪元素的方法。
.divider {
padding:1em;
transform:rotate(45deg);
width:0;
margin:auto;
border:2px white solid;
border-top:none;
border-left:none;
position:relative;
box-shadow:1px 1px 1px white;
}
.divider:before, div:after {
content:'';
width:2000px;
border-bottom:2px solid white;
position:absolute;
}
.divider:before {
transform-origin:top left;
bottom:1.9em;
left:2em;
transform:rotate(-45deg);
box-shadow:1px 1px 1px white;
}
.divider:after {
transform-origin:top left;
left:0.05em;
top:2.1em;
transform:rotate(135deg);
box-shadow:1px -1px 1px white;
}
html {
min-height:100%;
background:gray;
background:linear-gradient(to bottom left, gray, yellow,purple, gray, yellow,purple, gray, yellow,purple);
}
<div class="divider"></div>
您可以在 http://codepen.io/gc-nomade/pen/raYGyO 中使用它 ... 添加半径、变换等等 :)
HTML:
<div class="line-separator">
<div class="side-line"> </div>
<div class="triangle"> </div>
<div class="side-line"> </div>
</div>
CSS:
.side-line {
display: inline-block;
border-top: 1px solid black;
width: 20%;
}
.triangle {
display: inline-block;
height: 7px;
width: 7px;
transform: rotate(45deg);
transform-origin: center center;
border-top: 1px solid black;
border-left: 1px solid black;
margin: 0 -3px -3px;
}
现场演示:
http://jsfiddle.net/85saaphw/
如果您想让三角形倒置,只需将 transform: rotate(45deg) arg 更改为 225deg。
我正在背景图片上做一个分隔线,中间有一条线和一个指针,表示要往下看。这只是一根线,所以分隔线不是实心的。当我制作分隔线时,父级的边框穿过三角形,因为背景是透明的。
看看我要解释的内容:
我希望三角形隐藏中间的那条线。这就是我创建分隔线的方式:
<div class="splash">
<div class="splash-divider">
</div>
</div>
.splash {
background: url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
height: 200px;
}
.splash-divider {
position: relative;
margin: 20px auto 0 auto;
width: 50%;
height: 30px;
border-bottom: 1px solid #ffffff;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
}
.splash-divider:after {
content: "";
position: absolute;
top: 15px;
left: 50%;
width: 30px;
height: 30px;
border-left: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.15);
transform: rotate(-45deg) translate(-50%, -50%);
-webkit-transform: rotate(-45deg) translate(-50%, -50%);
-ms-transform: rotate(-45deg) translate(-50%, -50%);
-moz-transform: rotate(-45deg) translate(-50%, -50%);
-o-transform: rotate(-45deg) translate(-50%, -50%);
}
如您所见,父级包含背景图片。如果它只是一种颜色,这将是非常简单的。
这是fiddle。
编辑
已解决!这是工作 fiddle:http://jsfiddle.net/a9fkh0tp/1/
有可能,看现场演示:http://jsfiddle.net/a9fkh0tp/1/
.splash {
background: url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
height: 200px;
}
.splash-divider {
position: relative;
margin: 20px auto 0 auto;
width: 50%;
height: 30px;
border-bottom: 1px solid transparent;
}
.splash-divider:after {
content: "";
position: absolute;
top: 15px;
left: 50%;
width: 30px;
height: 30px;
border-left: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.15);
transform: rotate(-45deg) translate(-50%, -50%);
}
.splash-divider span:before,
.splash-divider span:after {
position: absolute;
top: 0;
display: inline-block;
content: "";
width: 50%;
height: 30px;
border-bottom: 1px solid #fff;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
}
.splash-divider span:before {
left: -28px;
}
.splash-divider span:after {
right: -16px;
}
<div class="splash">
<div class="splash-divider"><span></span></div>
</div>
想法是将单行分成两部分(左+右)。为此,请将 <span>
添加到 <div>
中,这样 <div class="splash-divider"><span></span></div>
我们就可以使用它进行更多操作了。
你也可以使用带有伪元素的方法。
.divider {
padding:1em;
transform:rotate(45deg);
width:0;
margin:auto;
border:2px white solid;
border-top:none;
border-left:none;
position:relative;
box-shadow:1px 1px 1px white;
}
.divider:before, div:after {
content:'';
width:2000px;
border-bottom:2px solid white;
position:absolute;
}
.divider:before {
transform-origin:top left;
bottom:1.9em;
left:2em;
transform:rotate(-45deg);
box-shadow:1px 1px 1px white;
}
.divider:after {
transform-origin:top left;
left:0.05em;
top:2.1em;
transform:rotate(135deg);
box-shadow:1px -1px 1px white;
}
html {
min-height:100%;
background:gray;
background:linear-gradient(to bottom left, gray, yellow,purple, gray, yellow,purple, gray, yellow,purple);
}
<div class="divider"></div>
您可以在 http://codepen.io/gc-nomade/pen/raYGyO 中使用它 ... 添加半径、变换等等 :)
HTML:
<div class="line-separator">
<div class="side-line"> </div>
<div class="triangle"> </div>
<div class="side-line"> </div>
</div>
CSS:
.side-line {
display: inline-block;
border-top: 1px solid black;
width: 20%;
}
.triangle {
display: inline-block;
height: 7px;
width: 7px;
transform: rotate(45deg);
transform-origin: center center;
border-top: 1px solid black;
border-left: 1px solid black;
margin: 0 -3px -3px;
}
现场演示: http://jsfiddle.net/85saaphw/
如果您想让三角形倒置,只需将 transform: rotate(45deg) arg 更改为 225deg。