html - 如何使矩形的边框不同？

Question

HTML:

<div class="rectangle">Some text</div>

CSS:

.rectangle {
    width: 300px;
    height: 80px;
    border: 5px solid red;
}

有没有办法让div看起来像照片中的样子？

Answer 1

您可以使用 ::after和 ::before实现结果。

.rectangle {
  width: 300px;
  height: 80px;
  border: 5px solid red;
  border-right: none;
  position: relative;
}

/* for the triangular shape */
.rectangle::after {
  content: "";
  position: absolute;
  right:-45px;
  bottom: 0;
  top:-5px;
  width: 0;
  height: 0;
  border-left: 45px solid red;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
  z-index:1000;
}


/* for hiding the portion except the border 
 of the triangle shape */
.rectangle::before {
  content: "";
  position: absolute;
  right:-40px;
  bottom: 0;
  top:0;
  width: 0;
  height: 0;
  border-left: 40px solid white;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  z-index:1001;
}

<div class="rectangle">Some text</div>

---

如果你不需要类似边框的结构，那么你可以避免 ::before部分并将背景颜色设置为主分区。

.rectangle {
  width: 300px;
  height: 80px;
  border: 5px solid red;
  border-right: none;
  position: relative;
  background:red;
}

.rectangle::after {
  content: "";
  position: absolute;
  right:-45px;
  bottom: 0;
  top:-5px;
  width: 0;
  height: 0;
  border-left: 45px solid red;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
}

<div class="rectangle">Some text</div>

更多形状请引用:CSS Tricks