透明箭头/三角形 [英] Transparent arrow/triangle

查看:173
本文介绍了透明箭头/三角形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在图片上建立透明箭头



所需的输出:





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方法:





箭头周围黑色部分的透明效果是使用



  .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%;转化来源: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%;转化原点: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>  

div>



4。 >

如果您需要使用此形状超过其他图片,背景渐变或任何非纯色,将需要使用不同的方法,以查看形状周围的形状像这样:





要点是使用相同的图像两次。一次在div元素中,一次在三角形中,并且将它们完全放置在具有绝对定位的相同位置。箭头是使用所做的转换: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);}。trimg {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.jpgalt =/> < / div> < div class =tr> < img src =https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpgalt =/> < / div>< / div>  



DEMO 包含框阴影。



5。 SVG和cliPath



DEMO 使用svg标记和clipPath。

如果您制作图形,这可能是一种语法更好的方法。


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

Desired output:

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;
}

The transparent CSS Arrow should be transparent without color.

解决方案

There are several approaches to make a transparent arrow over 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 :

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


1. SkewX()

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

The responsiveness of the shape is made with the padding-bottom property to maintain it's aspect ratio (this technique is described 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>

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

2. Border

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.

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!

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 :

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.

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:

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();.

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 with box shadows.

5. SVG and cliPath

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

这篇关于透明箭头/三角形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆