一个简单的CSS撕裂边框没有图像？

Question

在不加载外部图像的情况下，仅在div块的一侧创建撕裂边框的最简单方法是什么？

Answer 1

您可以使用css背景渐变创建翻录效果：

<强> HTML

.box:after {
  content: "";
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
  background: -webkit-linear-gradient(#2B3A48 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
  background: -o-linear-gradient(#2B3A48 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
  background: -moz-linear-gradient(#2B3A48 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
  background-repeat: repeat-x;
  background-size: 0px 100%, 9px 27px, 9px 27px;
}

<div class="box"></div>

---

想要透明度？

只需用rgba值替换十六进制颜色值。

• 使用的蓝色的十六进制值为＃2B3A48
• rgba中的这个蓝色是 rgba（43,48,72,0）
• rgba 代表红绿蓝Alpha ，其中alpha是透明的 评级从 0 到 1 。
• 因此将 rgba（43,48,72,0）的alpha值替换为transparant 你希望它成为。

示例

rgba（43,48,72， 0.5 ）= 50％透明。

ANSWER

简单的答案是将所有＃2B3A48 的实例替换为 rgba（43,48,72,0.5）

.square:after {
  content: "";
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: linear-gradient(rgba(43, 58, 72, 0.5) 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, rgba(43, 58, 72, 0.5) 33.33%) 0 0%;
  background: -webkit-linear-gradient(rgba(43, 58, 72, 0.5) 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, rgba(43, 58, 72, 0.5) 33.33%) 0 0%;
  background: -o-linear-gradient(rgba(43, 58, 72, 0.5) 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, rgba(43, 58, 72, 0.5) 33.33%) 0 0%;
  background: -moz-linear-gradient(rgba(43, 58, 72, 0.5) 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, rgba(43, 58, 72, 0.5) 33.33%) 0 0%;
  background-repeat: repeat-x;
  background-size: 0px 100%, 9px 27px, 9px 27px;
}

<div class="square"></div>

如果您希望黑色透明替换黑色，请改为使用rgba值。