Question

我有这个代码用于show svg over div：

<div class="div-2"></div>
<div class="div-1">
    <div class="decor-top">
        <svg class="decor" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0 L50 100 L100 0z" stroke-width="0"></path>
        </svg>
    </div>
</div>

CSS：

.div-1 {
    background-image: url('http://kidsplanet.ancorathemes.com/wp-content/uploads/2015/07/slider11.jpg');
    height:250px;
    width:100%;
    position:relative;
}
.div-2 {
    background-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
    height:250px;
    width:100%;
    background-color:green;
    position:relative;
}
.decor-top {
    position:absolute;
    height:30px;
    top:0;
    width:100%;
     fill: #fff;
  stroke: #fff;
}

这有效，但在div-2我添加green background and repeat texture image因此，为了更好的设计，我需要为svg区域添加/（替换为白色）green background and repeat texture image。如何添加？！

DEMO

Answer 1

像这样在另一个div上箭头实际上非常困难这是使用clip-path的解决方案。但这只有chrome和firefox支持如果你还在寻找一个更好的答案，那么这个问题有一些非常好的答案Transparent arrow/triangle by web-tiki

.div-1 {
  background-image: url('http://kidsplanet.ancorathemes.com/wp-content/uploads/2015/07/slider11.jpg');
  height: 250px;
  width: 100%;
  margin-top: -25px;
}
.div-2 {
  background-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
  height: 250px;
  width: 100%;
  background-color: green;
  position: relative;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
}

<div class="div-2"></div>
<div class="div-1">
</div>

将图像背景添加到svg区域

1 个答案: