代码之家 › 专栏 › 技术社区 › AbsoluteSith

如何在CSS中实现带状边缘?

css html

AbsoluteSith · 技术社区 · 5 年前

尝试用css来实现这一点。我在这方面已经取得了成就,但如果我的标签(职业生涯)超过了 div 部门 增加。但是左边的剪彩并没有相应的效果。有人能提出更好的方法吗?

.custom-tag-container {
  border: 1px solid;
  margin: auto;
  display: flex;
  align-items: stretch;
  border-color: green green green transparent;
  padding: 4px !important;
}

.custom-tag-container>p {
  color: green;
  font-weight: bold;
  flex: 1;
  margin: auto;
}

#triangle-left {
  height: 25px;
  width: 25px;
  background: transparent;
  transform: rotateZ(45deg) translateX(-12.5px) translateY(12.5px);
  border: 1px solid;
  border-color: green green transparent transparent;
}

<div class="custom-tag-container">
  <div id="triangle-left" />
  <p>Hello Worldsm</p>
</div>

JS Fiddle

0 回复 | 直到 5 年前

Temani Afif 5 年前

以下是一个依赖于倾斜变换的想法,它将具有响应性,并且您将具有透明度:

.box {
  height: 50px;
  border: 2px solid green;
  border-left: 0;
  border-radius:0 5px 5px 0;
  position:relative;
  margin:5px;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  left:0;
  height:50%;
  width:3px;
  background:green;
}
.box:before {
  top:0;
  transform:skew(45deg);
  transform-origin:top;
}
.box:after {
  bottom:0;
  transform:skew(-45deg);
  transform-origin:bottom;
}

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

<div class="box" style="height:80px"></div>

.box {
  height: 50px;
  border: 2px solid green;
  border-left: 0;
  border-radius:0 5px 5px 0;
  position:relative;
  margin:5px;
  overflow:hidden;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:50%;
  width:30px;
  background:
    linear-gradient(to top right,
      transparent calc(50% - 4px),green,transparent 50%) 
      bottom/100% calc(100% + 4px);
}
.box:after {
  transform:scaleY(-1);
  transform-origin:bottom;
}

<div class=“box”></div>

<div class=“box”样式=“高度:80px“></div>

还有SVG

.box {
  height: 50px;
  border: 2px solid green;
  border-left: 0;
  border-radius:0 5px 5px 0;
  position:relative;
  margin:5px;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:50%;
  width:30px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15" preserveAspectRatio="none"><line x1="0" y1="-1" x2="15" y2="16" stroke="green"  /></svg>') 0 0/100% 100%;
}
.box:after {
  transform:scaleY(-1);
  transform-origin:bottom;
}

<div class=“box”></div>

<div class=“box”样式=“高度:80px“></div>

您还可以优化代码,并且不使用伪元素:

.box {
  height: 50px;
  border: 2px solid green;
  border-left: 0;
  border-radius:0 5px 5px 0;
  margin:5px;
  background:
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15" preserveAspectRatio="none"><line x1="0" y1="-1" x2="15" y2="16" stroke="green"  /></svg>') top left/30px 50%,
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15" preserveAspectRatio="none"><line x1="0" y1="16" x2="15" y2="-1" stroke="green"  /></svg>') bottom left/30px 50%;
  background-repeat:no-repeat;
}

<div class=“box”></div>

同样的SVG可以用于获得箭头宽度也是动态的第一个结果。诀窍是只定义高度并保留比率:

.box {
  height: 50px;
  border: 2px solid green;
  border-left: 0;
  border-radius:0 5px 5px 0;
  margin:5px;
  background:
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15"><line x1="0" y1="-1" x2="15" y2="16" stroke="green"  /></svg>') top left/auto 50%,
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15"><line x1="0" y1="16" x2="15" y2="-1" stroke="green"  /></svg>') bottom left/auto 50%;
  background-repeat:no-repeat;
}

<div class=“box”></div>

<div class=“box”样式=“高度:80px“></div>

你可以很容易地在里面添加颜色。

.box {
  height: 50px;
  border: 2px solid green;
  border-left: 0;
  border-radius:0 5px 5px 0;
  position:relative;
  overflow:hidden;
  z-index:0;
  margin:5px;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  height:50%;
  border-left:3px solid green;
  background:yellow;
}
.box:before {
  top:0;
  transform:skew(45deg);
  transform-origin:top;
}
.box:after {
  bottom:0;
  transform:skew(-45deg);
  transform-origin:bottom;
}

<div class=“box”></div>

<div class=“box”样式=“高度:80px“></div>

以SVG为背景

.box {
  height: 50px;
  padding-left:30px;
  border: 2px solid green;
  border-left: 0;
  border-radius:0 5px 5px 0;
  margin:5px;
  background:
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15" preserveAspectRatio="none"><polygon points="16,17 16,-2 0,-1 " fill="yellow" stroke="green" /></svg>') top left/30px 50%,
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15" preserveAspectRatio="none"><polygon points="16,16 16,-2 0,16 " fill="yellow" stroke="green" /></svg>') bottom left/30px 50%,
   yellow content-box;
  background-repeat:no-repeat;
}

<div class=“box”></div>

<div class=“box”样式=“高度:80px“></div>

Justinas 5 年前

如果你有白色背景,那么你可以用两个 css三角形 丝带和另一个边缘覆盖物。如果你需要一些透明度,那么你应该依靠 clip-path (检查支持是否适合您的用户) 或者一些SVG元素。

* {
  box-sizing: border-box;
}

.ribbon {
  width: 100%;
  height: 100px;
  border: 2px solid blue;
  position: relative;
  padding: 0 120px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
}
.ribbon:before,
.ribbon:after {
  content: '';
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid green;
    border-bottom: 50px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .ribbon:after {
  border-left-color: white;
  left: -3px;
  }

<div class="ribbon">CARRIER</div>

为减少黑客的方法使用简单的背景图像。