时间戳

首页 > 解决方案 > 发送 SVG 边框 div

css - 发送 SVG 边框 div

问题描述

我正在制作一个信息图表，我想在 div 的边界线后面放置一个带边框的圆形，如下图所示：

想要的结果

正如您在图像中看到的，圆圈位于图层路径的后面。我尝试过使用 z-index，但无法使其正常工作。我现在得到的结果是完美的，但事实上我不能把圆圈放在后面：

在此处输入图像描述

.flex {
  display: flex !important;
}

.contenido {
  height: 180px;
}

.left {
  width: 33.33%;
}

.up {
  border-top: 5px solid;
  border-color: #5396C3;
}

.color {
  border-color: #5396C3;
}

.left-half {
  width: 16.667%;
}

.right-half {
  width: 16.667%;
}

.d {
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
  border-right: 5px solid;
  border-color: #5396C3;
  z-index: 8;
  position: relative;
}

.right {
  width: 33.33%;
}

.down {
  border-bottom: 5px solid;
  border-color: #5396C3;
}


/* This is the point that need to be behind */

.right-point {
  width: 40px;
  float: right;
  margin-top: 62px;
  margin-right: -23px;
  z-index: -1;
}
<div class="flex contenido">
  <div class="left up color">
  </div>
  <div class="left-half up color">
  </div>
  <div class="right-half up down d color">
    <img src="svg/work.svg" alt="" class="right-point">
  </div>
  <div class="right color">
  </div>
</div>
<div class="flex contenido">
  <div class="left ">
    <div class="flex" style="justify-content: flex-end;">
      <img src="img/vv.png" alt="" class="logo logo-left ">
    </div>
  </div>
  <div class="left-half up down c work" style="margin-top: -5px;">
    <img src="svg/work.svg" alt="" class="left-point">
  </div>
  <div class="right-half color">
  </div>
  <div class="right color">
  </div>
</div>

为什么圆圈不在边界后面？在我的情况下，我使用 SVG 作为一个圆圈，也许用 CSS 创建圆圈是一个更好的主意（它甚至会影响 SVG 的事实吗？）。

谢谢！

标签： css

解决方案

从类 .d 中删除 z-index 和相对位置，并为 .right-point 添加相对位置

.flex {
  display: flex !important;
}

.contenido {
  height: 180px;
}

.left {
  width: 33.33%;
}

.up {
  border-top: 5px solid;
  border-color: #5396C3;
}

.color {
  border-color: #5396C3;
}

.left-half {
  width: 16.667%;
}

.right-half {
  width: 16.667%;
}

.d {
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
  border-right: 5px solid;
  border-color: #5396C3;
 
  
}

.right {
  width: 33.33%;
}

.down {
  border-bottom: 5px solid;
  border-color: #5396C3;
}


/* This is the point that need to be behind */

.right-point {
  width: 40px;
  float: right;
  margin-top: 62px;
  margin-right: -23px;
  z-index: -1;
   position: relative;
}
<div class="flex contenido">
  <div class="left up color">
  </div>
  <div class="left-half up color">
  </div>
  <div class="right-half up down d color">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Yin_yang.svg/1024px-Yin_yang.svg.png" alt="" class="right-point">
  </div>
  <div class="right color">
  </div>
</div>
<div class="flex contenido">
  <div class="left ">
    <div class="flex" style="justify-content: flex-end;">
      <img src="img/vv.png" alt="" class="logo logo-left ">
    </div>
  </div>
  <div class="left-half up down c work" style="margin-top: -5px;">
    <img src="svg/work.svg" alt="" class="left-point">
  </div>
  <div class="right-half color">
  </div>
  <div class="right color">
  </div>
</div>

推荐阅读