时间戳

首页 > 解决方案 > 带边框的倾斜 div

html - 带边框的倾斜 div

问题描述

我有这个代码，其中有 6 个倾斜的 div。我想要做的只是给中心标题 2 div 提供黑色边框，但是当我给它提供边框时，它只显示顶部和底部。左右边框不可见。

.title {
  background: #f2f2f2;
}

.img {
  min-height: 300px;
  background: center/cover no-repeat;
}

.col:first-child {
  clip-path: polygon(0 0, calc(100% - 15px) 0, calc(100% - 10vw) 100%, 0 100%);
  margin-right: -5vw;
}

.col:nth-child(2) {
  clip-path: polygon(10vw 0, calc(100% - 15px) 0, calc(100% - 10vw) 100%, 15px 100%);
  margin: 0 -5vw;
}

.col:last-child {
  clip-path: polygon(10vw 0, 100% 0, 100% 100%, 15px 100%);
  margin-left: -5vw;
}

.col:nth-child(2)>.title,
.col:last-child>.title {
  padding-left: calc(10vw - 15px)!important;
}
.black-border{
 border: 2px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row text-center">
    <div class="col">
      <div class="title p-3">Title 1</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1012/800/800)"></div>
    </div>
    <div class="col">
      <div class="title p-3 black-border">Title 2</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1015/800/800)"></div>
    </div>
    <div class="col">
      <div class="title p-3">Title 3</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1016/800/800)"></div>
    </div>
  </div>
</div>

标签： htmlcssbootstrap-4

解决方案

使用drop-shadow过滤器在元素周围添加边框：

.title {
  background: #f2f2f2;
}
.filter {
  --b:2px;
  filter:
   drop-shadow(var(--b) 0px 0px black) 
   drop-shadow(0px var(--b) 0px black) 
   drop-shadow(calc(-1*var(--b)) 0px 0px black) 
   drop-shadow(0px calc(-1*var(--b)) 0px black)
}
.img {
  min-height: 300px;
  background: center/cover no-repeat;
}

.col:first-child {
  clip-path: polygon(0 0, calc(100% - 15px) 0, calc(100% - 10vw) 100%, 0 100%);
  margin-right: -5vw;
}

.col:nth-child(2) {
  clip-path: polygon(10vw 0, calc(100% - 15px) 0, calc(100% - 10vw) 100%, 15px 100%);
  margin: 0 -5vw;
}

.col:last-child {
  clip-path: polygon(10vw 0, 100% 0, 100% 100%, 15px 100%);
  margin-left: -5vw;
}

.col:nth-child(2)>.title,
.col:last-child>.title {
  padding-left: calc(10vw - 15px)!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="container-fluid mt-2">
  <div class="row text-center filter">
    <div class="col">
      <div class="title p-3">Title 1</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1012/800/800)"></div>
    </div>
    <div class="col">
      <div class="title p-3 black-border">Title 2</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1015/800/800)"></div>
    </div>
    <div class="col">
      <div class="title p-3">Title 3</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1016/800/800)"></div>
    </div>
  </div>
</div>

推荐阅读