CSS 透明箭头/三角形缩进

Question

提问by user3003727

I would like to make a transparent arrow over an image. This triangle should be indented in a semi transparent block and show the background image.

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

Desired output:

期望的输出：

transparent indented CSS triangle

透明缩进 CSS 三角形

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

The transparent CSS Arrowshould be transparent without color.

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

Answer 1

回答by web-tiki

There are several approaches to make a transparent arrowover an image with CSS. The two I will describe involve pseudo elements to minimize markup and have the same output. You can also see an SVG approach at the end of this answer :

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

Transparent arrow over an image

图像上的透明箭头

The transparent effect on the black part arround the arrow is made with rgba()colorsthat allow transparency. But you can use opacity on the pseudo elements if you prefer.

箭头周围黑色部分的透明效果由允许透明的rgba()颜色制成。但是如果你愿意，你可以在伪元素上使用不透明度。

1. SkewX()

1.倾斜X()

You can use the CSS3skewX()property on two pseudo elements to make the transparent arrow. The main asset of this approach is that the transparent arrow can be responsivebut it also allows you to put a border on the black shape and around the traingle.

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

The responsiveness of the shape is made with the padding-bottomproperty to maintain it's aspect ratio (this technique is described here).

形状的响应性是padding-bottom通过保持其纵横比的属性来实现的（此处描述了此技术）。

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>

Browser support for the transform : skew()property is IE9+ (see canIuse).

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

2. Border

2. 边框

The asset of this technique is browser support so if you need IE8 support this one is for you. The drawback is that the shape can't be responsive because border can't use % widths.

这种技术的优点是浏览器支持，所以如果你需要 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. Play with it!

3. 玩它！

Example : if you can change the black transparent color to the same as your background color (white here), you can make an transparent triangle/arrow with the same background image as the block :

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

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 with a triangle over an image.

4. 图像上方带有三角形的工具提示。

If you need to use this shape over another image, background gradient or whatever non plain color, you will need to use a different approach in order to see the image all around the shape like this:

如果您需要在另一个图像、背景渐变或任何非纯色上使用此形状，您将需要使用不同的方法来查看形状周围的图像，如下所示：

tooltip like element with a triangle over an image

类似工具提示的元素，在图像上有一个三角形

The point is to use the same image twice. Once in the div element and once in the triangle and to postion them exactly at the same place with absolute positioning. The arrow is made with transform:rotate();.

重点是两次使用相同的图像。一次在 div 元素中，一次在三角形中，并以绝对定位将它们完全放置在同一位置。箭头是用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>

DEMOwith box shadows.

带框阴影的演示。

5. SVG and cliPath

5. SVG 和 cliPath

DEMOusing an svg tag and clipPath.
This might be a semanticaly better approach if you are making graphics.

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

Answer 2

回答by The Pragmatick

Simple Approach

简单的方法

Use pseudo element with box-shadowand transform: rotate();
Add overflow: hidden;to main div.

使用伪元素box-shadow和transform: rotate();
添加overflow: hidden;到主div。

Snippet :

片段：

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>

Answer 3

回答by ArcadeRenegade

Here is a solution using CSS clip-paththat doesn't overflow the wrapper.

这是一个使用 CSS剪辑路径的解决方案，它不会溢出包装器。

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

CSS 透明箭头/三角形缩进

提问by user3003727

回答by web-tiki

1. SkewX()

1.倾斜X()

2. Border

2. 边框

3. Play with it!

3. 玩它！

4. Tooltip with a triangle over an image.

4. 图像上方带有三角形的工具提示。

5. SVG and cliPath

5. SVG 和 cliPath

回答by The Pragmatick

Simple Approach

简单的方法

回答by ArcadeRenegade

相关推荐

最近更新

标签

CSS 透明箭头/三角形缩进

提问by user3003727

回答by web-tiki

1. SkewX()

1.倾斜X()

2. Border

2. 边框

3. Play with it!

3. 玩它！

4. Tooltip with a triangle over an image.

4. 图像上方带有三角形的工具提示。

5. SVG and cliPath

5. SVG 和 cliPath

回答by The Pragmatick

Simple Approach

简单的方法

回答by ArcadeRenegade

相关推荐

CSS 在 div 中居中对齐 div？

在 CSS 中使输入值大写而不影响占位符

CSS :not(:last-of-type) 不适用于课堂

CSS 您将如何为多种屏幕尺寸编写媒体查询？

相关推荐

最近更新

标签