css - 如何在自定义形状周围添加类似路径的边框

Question

我需要像附件那样做图像。我用里面的图像做了多边形，但我不能添加蓝色的鸟。我对带有伪类的多边形使用剪辑路径。如何添加蓝色倾斜边框？

.clip-each-blue {
  width: 100px;
  height: 90px;
  position: relative;
}

.clip-each-blue:after {
  content: "";
  position: absolute;
  background: #fff;
}

.clip-each-blue,
.clip-each-blue:after {
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #4850be;
}

.border-style-thin {
  background-color: #4850be;
}

.content-feature-image {
  display: block;
  outline: 0;
}

.content-feature-image img {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  position: relative;
  top: 20px;
  z-index: 1;
  transform: rotate(-90deg);
}

.border-style-thin:after {
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
}

<section id="polygon">
  <div class="clip-wrap">
    <div class="clip-each-blue-border">
      <div class="clip-each-blue">
        <a href="#" class="content-feature-image"><img src="images/section/section_2_icon_1.png" alt="" /></a>
      </div>
    </div>
  </div>

标签： cssclip-path

Answer 1

一种方法如下：

.clip-each-blue {
  width: 100px;
  height: 90px;
  position: relative;
}

.clip-each-blue:after {
  content: "";
  position: absolute;
  background: #fff;
}

.clip-each-blue,
.clip-each-blue:after {
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  transform: rotate(90deg); /* Rotate polygon to match desired output. */
  background: #4850be;
}

.border-style-thin {
  background-color: #4850be;
}

.content-feature-image {
  display: block;
  outline: 0;
}

.content-feature-image img {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  position: relative;
  top: 20px;
  z-index: 1;
  transform: rotate(-90deg);
}

.border-style-thin:after {
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
}

/* New stuff. */

.clip-each-blue-border {
    position: absolute;
    left: 25px;
}

.clip-border {
  border: 4px solid #4850be;
  width: 140px;
  height: 140px;
  z-index: -1;
  position: absolute;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
}

.clip-wrap {
  position: relative;
}

<section id="polygon">
  <div class="clip-wrap">
    <div class="clip-each-blue-border">
      <div class="clip-each-blue">
        <a href="#" class="content-feature-image"><img src="images/section/section_2_icon_1.png" alt="" /></a>
      </div>
    </div>
    <!-- Insert div to transform to isometric frame. -->
    <div class="clip-border"></div>
  </div>
  </section>