如何在CSS中实现响应式功能区形状？ [英] How to achieve a responsive ribbon shape in CSS?

查看：59
本文介绍了如何在CSS中实现响应式功能区形状？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



尝试使用CSS实现此目的。
我已经做到了，但是如果我的标签（CAREER）的长度大于 div 的大小，这就会中断。如果更长，则内容会自动换行，并且 div 的高度会增加。但是左侧的色带切割并不能快速响应。有人可以提出更好的方法吗？



  .custom-tag-container {border ：1px实心;保证金：自动；显示：flex; align-items：拉伸；边框颜色：绿色绿色绿色透明； padding：4px！important;}。custom-tag-container> p {颜色：绿色； font-weight：粗体; flex：1; margin：auto;}＃triangle-left {高度：25px;宽度：25px；背景：透明；转换：rotateZ（45deg）translateX（-12.5px）translateY（12.5px）;边框：1px实线； border-color：绿色绿色透明透明；}  

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





如果您要保留箭头的宽度相同，您可以使用背景考虑不同的想法：



  .box {高度：50px;边框：2px纯绿色；左边框：0； border-radius：0 5px 5px 0;位置：相对；边距：5px;溢出：隐藏；}。box：之前，.box：之后{content：;位置：绝对；左：0;顶：0;高度：50％;宽度：30px;背景：线性渐变（位于右上角，透明calc（50％-4px），绿色，透明50％）底部/ 100％calc（100％+ 4px）;}。box：after {transform：scaleY（-1） ; transform-origin：bottom;}  

 < div class =  box>< / div>< div class = box style = height：80px>< / div>



以及SVG 



  .box {高度：50像素；边框：2px纯绿色；左边框：0； border-radius：0 5px 5px 0;位置：相对； margin：5px;}。box：before，.box：after {content：;位置：绝对；左：0;顶：0;高度：50％;宽度：30px; background：url（'data：image / svg + xml; utf8，< svg xmlns = http://www.w3.org/2000/svg version = 1.1 viewBox = 0 0 15 15 prepareAspectRatio = 无><行x1 = 0 y1 =-1 x2 = 15 y2 = 16笔画=绿色 />< / svg>'）0 0/100％100 ％;}。box：after {transform：scaleY（-1）; transform-origin：bottom;}  

 < div class =  box>< / div>< div class = box style = height：80px>< / div>





您还可以优化代码并在没有伪元素的情况下执行此操作：



 。框{高度：50像素；边框：2px纯绿色；左边框：0； border-radius：0 5px 5px 0;边距：5px;背景：url（'data：image / svg + xml; utf8，< svg xmlns = http://www.w3.org/2000/svg version = 1.1 viewBox = 0 0 15 15 reserveAspectRatio =  none><行x1 = 0 y1 =-1 x2 = 15 y2 = 16 stroke =绿色 />< / svg>'）左上/ 30px 50％ ，url（'data：image / svg + xml; utf8，< svg xmlns = http://www.w3.org/2000/svg version = 1.1 viewBox = 0 0 15 15 reserveAspectRatio = none>< line x1 = 0 y1 = 16 x2 = 15 y2 =-1 stroke = green />< / svg>'）左下角/ 30px 50％； background-repeat：no-repeat;}  

 < div class = box>< / div>< div class = box style = height：80px>< / div>



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



  .box {高度：50像素；边框：2px纯绿色；左边框：0； border-radius：0 5px 5px 0;边距：5px;背景：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 =绿色 />< / svg>'）左上/自动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 =绿色 />< / svg>'）左下/自动50％； background-repeat：no-repeat;}  

 < div class = box>< / div>< div class = box style = height：80px>< / div>





您也可以轻松在其中添加颜色。



具有倾斜变换：



  .box {高度：50像素；边框：2px纯绿色；左边框：0； border-radius：0 5px 5px 0;位置：相对；溢出：隐藏z-index：0; margin：5px;}。box：before，.box：after {content：;位置：绝对； z索引：-1；左：0;对：0;高度：50％; border-left：3px纯绿色； background：yellow;}。box：before {top：0;变形：偏斜（45度）; transform-origin：top;}。box：之后{bottom：0;变形：偏斜（-45deg）; transform-origin：bottom;}  

 < div class =  box>< / div>< div class = box style = height：80px>< / div>



具有SVG背景



  .box {高度：50像素； padding-left：30px;边框：2px纯绿色；左边框：0； border-radius：0 5px 5px 0;边距：5px;背景：url（'data：image / svg + xml; utf8，< svg xmlns = http://www.w3.org/2000/svg version = 1.1 viewBox = 0 0 15 15 reserveAspectRatio =  none><多边形点= 16,17 16，-2 0，-1 fill = yellow stroke = green />< / svg>'）左上/ 30px 50％， url（'data：image / svg + xml; utf8，< svg xmlns = http://www.w3.org/2000/svg version = 1.1 viewBox = 0 0 15 15 reserveAspectRatio = none ><多边形点= 16,16 16，-2 0,16 fill = yellow stroke =绿色 />< / svg>'）左下/ 30px 50％，黄色框; background-repeat：no-repeat;}  

 < div class = box>< / div>< div class = box style = height：80px>< / div>


Trying to achieve this with css. I've achieved in doing this but this breaks if my label (CAREER) is longer the size of the div. If its longer then the content wraps and the height of the div increases. But the left ribbon cut does not do that responsively. Can someone suggest a better approach?

.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

解决方案

Here is an idea that rely on skew transformation where it will be responsive and you will have transparency:

.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>

If you want to keep the same width for the arrow, you can consider a different idea using background:

.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" style="height:80px"></div>

and with SVG too

.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" style="height:80px"></div>

You can also optimize the code and do it without pseudo element:

.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>

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

The same SVG can be used to obtain the first result where the arrow width is also dynamic. The trick is to only define the height and preserve the ratio:

.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" style="height:80px"></div>

You can easily add a coloration inside too.

With skew transformation:

.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" style="height:80px"></div>

With the SVG background

.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" style="height:80px"></div>

这篇关于如何在CSS中实现响应式功能区形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆