画像上の透明な矢印を作成したいと思います。この三角形は半透明のブロックでインデントされ、背景画像が表示されます。
望ましい出力:
.barShow {
background-color: #000;
opacity: 0.5;
}
.barShow:before {
top: 0%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #999;
border-width: 20px;
margin-left: -20px;
}
<div class="barShow"></div>
transparent CSS Arrowは、色なしで透明でなければなりません。
[〜#〜] css [〜#〜]で画像上に透明矢印を作成する方法がいくつかあります。説明する2つは、マークアップを最小限に抑え、同じ出力を得るための擬似要素を含みます。この回答の最後にSVGアプローチもあります。
矢印の周りの黒い部分の透明効果は、透明を可能にする rgba()
colors で行われます。ただし、必要に応じて擬似要素で不透明度を使用できます。
2つの擬似要素でCSS3skewX()
プロパティを使用して、透明な矢印を作成できます。このアプローチの主な利点は、透明な矢印をresponsiveにできることですが、黒い図形とトレーンの周りに境界線を置くこともできます。
形状の応答性は、そのアスペクト比を維持するために_padding-bottom
_プロパティで作成されます(この手法は here で説明されています)。
_.wrap {
position: relative;
overflow: hidden;
width: 70%;
margin: 0 auto;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.arrow {
position: absolute;
bottom: 0;
width: 100%;
padding-bottom: 3%;
background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before,
.arrow:after {
content: '';
position: absolute;
bottom: 100%;
width: 50%;
padding-bottom: inherit;
background-color: inherit;
}
.arrow:before {
right: 50%;
-ms-transform-Origin: 100% 100%;
-webkit-transform-Origin: 100% 100%;
transform-Origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.arrow:after {
left: 50%;
-ms-transform-Origin: 0 100%;
-webkit-transform-Origin: 0 100%;
transform-Origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
_
_<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
<div class="arrow"></div>
</div>
_
transform : skew()
プロパティのブラウザサポートはIE9 +です( canIuseを参照 )。
この手法の長所はブラウザのサポートですので、IE8のサポートが必要な場合はこれが最適です。欠点は、境界線が%幅を使用できないため、形状が応答しなくなることです。
_.wrap {
position: relative;
overflow: hidden;
width: 70%;
margin: 0 auto;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.arrow {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before,
.arrow:after {
content: '';
position: absolute;
bottom: 100%;
width: 50%;
box-sizing: border-box;
}
.arrow:before {
right: 50%;
border-bottom: 20px solid rgba(0, 0, 0, 0.8);
border-right: 20px solid transparent;
}
.arrow:after {
left: 50%;
border-bottom: 20px solid rgba(0, 0, 0, 0.8);
border-left: 20px solid transparent;
}
_
_<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
<div class="arrow"></div>
</div>
_
例:黒の透明色を背景色(ここでは白)と同じに変更できる場合、ブロックと同じ背景画像で透明な三角形/矢印を作成できます。
_.wrap {
position: relative;
overflow: hidden;
width: 50%;
margin: 0 auto;
background-color:#fff;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
bottom: 0;
width: 50%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
right: 50%;
-ms-transform-Origin: 100% 100%;
-webkit-transform-Origin: 100% 100%;
transform-Origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 50%;
-ms-transform-Origin: 0 100%;
-webkit-transform-Origin: 0 100%;
transform-Origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
_
_<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>
_
この形状を使用する必要がある場合別の画像の上、背景のグラデーション、または無地の色を使用する場合は、次のように形状全体に画像を表示するために異なるアプローチを使用する必要があります。
ポイントは、同じ画像を2回使用することです。 div要素に1回、三角形に1回、絶対位置で同じ場所に正確に配置します。矢印は transform:rotate();
で作成 です。
_body{
padding-top:100px;
background:url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg')no-repeat center center;
background-size:cover;
}
.wrap, .img {
display:inline-block;
position:relative;
}
.tr{
position:absolute;
overflow:hidden;
top:-25px; left:100px;
width:50px; height:50px;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
.tr img{
position:absolute;
top:-15px; left:-100px;
-webkit-transform-Origin: 125px 40px;
-ms-transform-Origin: 125px 40px;
transform-Origin: 125px 40px;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.img{
overflow:hidden;
width: 600px; height:100px;
}
.img img{
position:absolute;
top:-40px;
}
_
_<div class="wrap">
<div class="img">
<img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
</div>
<div class="tr">
<img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
</div>
</div>
_
[〜#〜] demo [〜#〜]ボックスの影付き。
[〜#〜] demo [〜#〜] svgタグとclipPathを使用します。
グラフィックを作成している場合、これは意味論的に優れたアプローチかもしれません。
_box-shadow
_およびtransform: rotate();
で擬似要素を使用します
_overflow: hidden;
_をメインdivに追加します。
スニペット:
_body {
margin: 0;
padding: 0;
background: url(http://i.imgur.com/EinPKO3.jpg);
background-size: cover;
}
div {
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
overflow: hidden;
}
div:before {
position: absolute;
top: -50px;
left: calc(50% - 35px);
content: "";
height: 50px;
width: 50px;
background: transparent;
-webkit-transform-Origin: 0% 100%;
-moz-transform-Origin: 0% 100%;
-ms-transform-Origin: 0% 100%;
transform-Origin: 0% 100%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: 0 0 0 5000px rgba(0, 0, 0, 0.6);
}
_
_<div></div>
_
以下は、CSS clip-path を使用して、ラッパーをオーバーフローさせないソリューションです。
.wrap {
position:relative;
width:480px;
height:270px;
background-image:url(http://placehold.it/480x270);
}
.wrap:after {
content:"";
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
height:50px;
background-color:rgba(0, 0, 0, 0.7);
-webkit-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
-moz-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
}
<div class="wrap"></div>