左/右透明切出箭头

问题描述

我知道这之前已经回答了一个div的底部，我不能解决如何做一个div的左边和右边。

我试图获得与此相同的效果：

  BODY {background：url（http：// farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg）0 -100px;}＃wrapper {overflow：hidden; height：116px;}＃test {height：100px; background-color：#ccc; position：relative;}＃test：before {content：; position：absolute; left：-6px; width：50％; height：16px; top：100px; background-color：#ccc; -webkit-transform：skew（-40deg）; -moz-transform：skew（-40deg）; -o-transform：skew（-40deg）; -ms-transform：skew（-40deg）; transform：skew（-40deg）;}＃test：after {content：; position：absolute; right：-6px; width：50％; height：16px; top：100px; background-color：#ccc; -webkit-transform：skew（40deg）; -moz-transform：skew（40deg）; -o-transform：skew（40deg）; -ms-transform：skew（40deg）; transform：skew（40deg）;}  

 < div id =wrapper> < div id =test>< / div>< / div>  

但在左上剪切，在向右上剪切。

解决方案

此解决方案改编自此答案：：

  .wrap {position：relative; overflow：hidden;宽度：70％; margin：0 auto;}。wrap img {width：100％; height：auto; display：block;}。arrow {position：absolute; left：0; top：0; height：100％;}  

 < div class = wrap> < img src =https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg/> < svg class =arrowxmlns =http://www.w3.org/2000/svgviewbox =0 0 10 100> < path d =M-1 -1 H10 V45 L5 50 L10 55 V101 H-1zfill =＃ffffill-opacity =0.8stroke-width =0/> < / svg>< / div>  

I am aware this has been answered previously however that was for the bottom of a div and I cannot work out how to do it for the left and right of a div.

I am trying to acheive the same effect as this:

BODY {
  background: url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg) 0 -100px;
}
#wrapper {
  overflow: hidden;
  height: 116px;
}
#test {
  height: 100px;
  background-color: #ccc;
  position: relative;
}
#test:before {
  content: "";
  position: absolute;
  left: -6px;
  width: 50%;
  height: 16px;
  top: 100px;
  background-color: #ccc;
  -webkit-transform: skew(-40deg);
  -moz-transform: skew(-40deg);
  -o-transform: skew(-40deg);
  -ms-transform: skew(-40deg);
  transform: skew(-40deg);
}
#test:after {
  content: "";
  position: absolute;
  right: -6px;
  width: 50%;
  height: 16px;
  top: 100px;
  background-color: #ccc;
  -webkit-transform: skew(40deg);
  -moz-transform: skew(40deg);
  -o-transform: skew(40deg);
  -ms-transform: skew(40deg);
  transform: skew(40deg);
}

<div id="wrapper">
  <div id="test"></div>
</div>

But with the cut out on the left and another with the cut out on the right.

解决方案

This solution is adapted from this answer : Transparent arrow/triangle

The point is to use two skewed pseudo elements to make the transparent cut out arrow. Both pseudo elements are absolutely positioned and skewed.

In the following demo, the arrow is on the left. To make the same on on the right, you could duplicate the .arrow element and use scaleX(-1) + positioning on the second one. This will allow you to change both sides at the same time and have less CSS. Or you can make a new element based on the first one and change the positioning and skew properties.

DEMO

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  left: 0; top:0;
  width: 3%;
  height:100%;
  background-color: rgba(255,255,255,.8);
}
.arrow:before, .arrow:after {
  content:'';
  position: absolute;
  left: 100%;
  width: 100%;
  height:50%;
  background-color: inherit;
}
.arrow:before {
  bottom: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewY(-45deg);
  -webkit-transform: skewY(-45deg);
  transform: skewY(-45deg);
}
.arrow:after {
  top: 50%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -ms-transform: skewY(45deg);
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}

<div class="wrap">
    <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" />
    <div class="arrow"></div>
</div>

---

For the same output, you can use an svg :

DEMO

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow{
  position:absolute;
  left:0; top:0;
  height:100%;
}

<div class="wrap">
  <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" />
  <svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 100">
    <path d="M-1 -1 H10 V45 L5 50 L10 55 V101 H-1z" fill="#fff" fill-opacity="0.8" stroke-width="0"/>
  </svg>
</div>

这篇关于左/右透明切出箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！