web-dev-qa-db-ja.com

インデントされた透明な矢印/三角形

画像上の透明な矢印を作成したいと思います。この三角形は半透明のブロックでインデントされ、背景画像が表示されます。

望ましい出力：

transparent indented CSS triangle

.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は、色なしで透明でなければなりません。

csscss3svgcss-shapes
46
user3003727

[〜＃〜] css [〜＃〜]で画像上に透明矢印を作成する方法がいくつかあります。説明する2つは、マークアップを最小限に抑え、同じ出力を得るための擬似要素を含みます。この回答の最後にSVGアプローチもあります。

Transparent arrow over an image

矢印の周りの黒い部分の透明効果は、透明を可能にする rgba() colors で行われます。ただし、必要に応じて擬似要素で不透明度を使用できます。

1. SkewX（）

2つの擬似要素でCSS3skewX()プロパティを使用して、透明な矢印を作成できます。このアプローチの主な利点は、透明な矢印をresponsiveにできることですが、黒い図形とトレーンの周りに境界線を置くこともできます。

形状の応答性は、そのアスペクト比を維持するために_padding-bottom_プロパティで作成されます（この手法は here で説明されています）。

[〜＃〜] demo [〜＃〜]

_.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を参照 ）。

2.ボーダー

この手法の長所はブラウザのサポートですので、IE8のサポートが必要な場合はこれが最適です。欠点は、境界線が％幅を使用できないため、形状が応答しなくなることです。

[〜＃〜] demo [〜＃〜]

_.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>_

3.それで遊んでください！

例：黒の透明色を背景色（ここでは白）と同じに変更できる場合、ブロックと同じ背景画像で透明な三角形/矢印を作成できます。

transparetn arrow with a see through image

[〜＃〜] demo [〜＃〜]

_.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>_

4.画像の上に三角形の付いたツールチップ。

この形状を使用する必要がある場合別の画像の上、背景のグラデーション、または無地の色を使用する場合は、次のように形状全体に画像を表示するために異なるアプローチを使用する必要があります。

tooltip like element with a triangle over an image

ポイントは、同じ画像を2回使用することです。 div要素に1回、三角形に1回、絶対位置で同じ場所に正確に配置します。矢印は transform:rotate();で作成 です。

[〜＃〜] demo [〜＃〜]

_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 [〜＃〜]ボックスの影付き。

5. SVGとcliPath

[〜＃〜] demo [〜＃〜] svgタグとclipPathを使用します。
グラフィックを作成している場合、これは意味論的に優れたアプローチかもしれません。

107
web-tiki

シンプルなアプローチ

  • _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>_
5
The Pragmatick

以下は、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>
2
ArcadeRenegade