透明箭头/三角形缩进

时间：2014-05-20 11:44:59

标签： css css3 svg css-shapes

我想在图片上制作透明箭头。此三角形应缩进半透明块并显示背景图像。

期望的输出：

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>

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

4 个答案:

答案 0 :(得分：107)

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

Transparent arrow over an image

箭头周围黑色部分的透明效果使用rgba() colors进行透明效果。但是如果您愿意，可以在伪元素上使用不透明度。

1。如果skewX（）

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

形状的响应性使用padding-bottom属性来保持其纵横比（此技术描述为here）。

<强> DEMO

＆＃13;
＆＃13; 
.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);
}
＆＃13; 
<div class="wrap">
  <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
  <div class="arrow"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

transform : skew()属性的浏览器支持是IE9 +（see canIuse）。

2。边界

此技术的资产是浏览器支持，因此如果您需要IE8支持，这个适合您。缺点是形状不能响应，因为边框不能使用％宽度。

<强> DEMO

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<div class="wrap">
  <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
  <div class="arrow"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

3。玩它！

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

transparetn arrow with a see through image

<强> DEMO

＆＃13;
＆＃13; 
.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);
}
＆＃13; 
<div class="wrap">
    <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>
＆＃13;
＆＃13;
＆＃13;

4。在图像上有三角形的工具提示。

如果您需要将此形状用于其他图像，背景渐变或任何非纯色，则需要使用不同的方法才能在形状周围看到图像，如下所示：

tooltip like element with a triangle over an image

重点是两次使用相同的图像。一旦进入div元素并进入三角形，并将它们准确地放置在绝对定位的同一位置。箭头为made with transform:rotate();。

<强> DEMO

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

带框阴影的

DEMO 。

5。 SVG和cliPath

DEMO 使用svg标记和clipPath 如果您正在制作图形，这可能是一种语义上更好的方法。

答案 1 :(得分：4)

简单方法

  • 将伪元素与box-shadow和transform: rotate();

    • 一起使用

  • 将overflow: hidden;添加到主div。

代码段

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<div></div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

这是一个使用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>

答案 3 :(得分：1)

我们可以使用线性渐变来实现。没有伪元素。我使用了一些CSS变量来轻松控制所有内容。这样更灵活。

.a {
  /* you can change these variables */
  --arrow-width: 20px;
  --rgba: rgba(0, 0, 0, 0.5);
  --bottom-height: 50px;
  
  width: 100%;
  height: 300px;
  background: linear-gradient(to right, var(--rgba) 0 calc(50% - var(--arrow-width)), transparent calc(50% - var(--arrow-width)) calc(50% + var(--arrow-width)), var(--rgba) 0 calc(50% + var(--arrow-width) * 2)) 0 calc(100% - var(--bottom-height)) / 100% var(--arrow-width), 
              linear-gradient(to bottom right, transparent 0 50%, var(--rgba) 50.1% 100%) calc(50% + (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(to bottom left, transparent 0 50%, var(--rgba) 50.1% 100%) calc(50% - (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(var(--rgba), var(--rgba)) 0 100%/ 100% calc(var(--bottom-height)),
              url(https://picsum.photos/id/600/360) 50% 50% / cover;
  background-repeat: no-repeat;
}
<div class="a"></div>

enter image description here

通过更改变量：

.a {
  /* you can change these variables */
  --arrow-width: 50px;
  --rgba: rgba(0, 0, 0, 0.5);
  --bottom-height: 70px;
  
  width: 100%;
  height: 300px;
  background: linear-gradient(to right, var(--rgba) 0 calc(50% - var(--arrow-width)), transparent calc(50% - var(--arrow-width)) calc(50% + var(--arrow-width)), var(--rgba) 0 calc(50% + var(--arrow-width) * 2)) 0 calc(100% - var(--bottom-height)) / 100% var(--arrow-width), 
              linear-gradient(to bottom right, transparent 0 50%, var(--rgba) 50.1% 100%) calc(50% + (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(to bottom left, transparent 0 50%, var(--rgba) 50.1% 100%) calc(50% - (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(var(--rgba), var(--rgba)) 0 100%/ 100% calc(var(--bottom-height)), 
              url(https://picsum.photos/id/600/360) 50% 50% / cover;
  background-repeat: no-repeat;
}
<div class="a"></div>

为了更好地理解技巧，这里是不同颜色的渐变：

.a {
  /* you can change these variables */
  --arrow-width: 50px;
  --bottom-height: 70px;
  
  width: 100%;
  height: 300px;
  background: linear-gradient(to right, red 0 calc(50% - var(--arrow-width)), transparent calc(50% - var(--arrow-width)) calc(50% + var(--arrow-width)), blue 0 calc(50% + var(--arrow-width) * 2)) 0 calc(100% - var(--bottom-height)) / 100% var(--arrow-width), 
              linear-gradient(to bottom right, transparent 0 50%, yellow 50.1% 100%) calc(50% + (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(to bottom left, transparent 0 50%, green 50.1% 100%) calc(50% - (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(purple, purple) 0 100%/ 100% calc(var(--bottom-height)), 
              url(https://picsum.photos/id/600/360) 50% 50% / cover;
  background-repeat: no-repeat;
}
<div class="a"></div>

enter image description here

掩盖：

.a {
  /* you can change this variable */
  --arrow-width: 30px;
  
  width: 100%;
  height: 300px;
  --mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--arrow-width)) no-repeat, 
          linear-gradient(to top right, transparent 0 50%, #000 50.1% 100%) calc(50% - var(--arrow-width) / 2) 100% / var(--arrow-width) var(--arrow-width) no-repeat, 
          linear-gradient(to top left, transparent 0 50%, #000 50.1% 100%) calc(50% + var(--arrow-width) / 2) 100% / var(--arrow-width) var(--arrow-width) no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background: url(https://picsum.photos/id/600/360) 50% 50% / cover;
}
<div class="a"></div>

enter image description here

相关问题
最新问题