css – 透明箭头/三角形

我想在图像上做一个透明的箭头。此三角形应在块中缩进，并显示背景图片。

所需输出：

CSS：

.barShow {
    background-color: #000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
         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;
}

透明CSS箭头应该是透明的，没有颜色。

解决方法

有几种方法使用CSS在图像上创建一个透明的箭头。两个我将描述涉及伪元素以最小化标记并具有相同的输出。您还可以在此答案的末尾看到一个SVG方法：

对于箭头周围的黑色部分的透明效果用允许透明度的rgba() colors进行。但是如果你喜欢，你可以使用伪元素的不透明度。

SkewX()

您可以在两个伪元素上使用CSS3 skewX()属性来创建透明箭头。这种方法的主要优点是，透明的箭头可以响应，但它也允许你在黑色的形状和周围放置一个边框。

形状的响应性是通过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.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>

浏览器支持的转换：skew()属性是IE9(see canIuse)。

2.边框

这种技术的资产是浏览器支持，所以如果你需要IE8支持这一个是为你。缺点是形状不能响应，因为border不能使用％width。

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,.arrow:after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 50%;
  Box-sizing: border-Box;
}
.arrow:before {
  right: 50%;
  border-bottom: 20px solid rgba(0,0.8);
  border-right: 20px solid transparent;
}
.arrow:after {
  left: 50%;
  border-bottom: 20px solid rgba(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.玩吧！

示例：如果您可以将黑色透明颜色更改为与背景颜色(此处为白色)相同，则可以使用与块相同的背景图像创建透明三角形/箭头：

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.在图像上带有三角形的工具提示。

如果你需要使用这种形状超过另一个图像，背景渐变或任何非纯色，你将需要使用不同的方法，以查看形状周围的图像像这样：

重点是使用相同的图像两次。一次在div元素中，一次在三角形中，并将它们完全放置在具有绝对定位的相同位置。箭头是made with 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。这可能是一个语义更好的方法，如果你是制作图形。

css – 透明箭头/三角形

解决方法

猜你在找的CSS相关文章