带有倾斜底角的纯 CSS 功能区

Question

我想要实现的是创建一个纯 CSS 功能区，它将：

• 适应包含的文本（工作），
• 浮动到容器的左侧（工作），
• 右下角偏斜，如下图所示：

这是我的代码 - HTML：

<div class="container">
<div class="ribbon left_ribbon"><h2>Testing</h2></div>
</div>

和 CSS：

.container {
  width:80%;
  background:grey;
  display:block;
  min-height:500px;
  margin:0 auto;
}

.ribbon{
    color: #fff;
    margin: 30px 0 50px;
    position: relative;
    text-transform: uppercase;
    background: rgb(0, 164, 239);
    box-shadow: 0px 1px 3px rgba(0,0,0,.2);
    padding: 10px 15px;
    clear: both;
}

div.left_ribbon{
    color: #000;
    margin-left: -10px;
    float: left;
}

div.left_ribbon h2{
    margin: 0 12px;
  color:#fff;
}
div.left_ribbon::before{
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    content: "";
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgb(0, 80, 116);
}

是否可以通过 CSS 或我必须使用 SVG 文件？

Answer 1

clip-path 可以轻松做到：

.box {
  width:200px;
  height:100px;
  margin:50px;
  position:relative;
  background:grey;
}

.box:before {
  content:"Ribbon";
  font-size:25px;
  padding:5px 25px 10px;
  position:absolute;
  top:10px;
  left:-5px;
  background:
    linear-gradient(#000 0 0) bottom/100% 5px no-repeat
    #00a4ef;
  clip-path:polygon(0 0,100% 0,80% calc(100% - 5px),5px calc(100% - 5px),5px 100%,0 calc(100% - 5px))
}

<div class="box">

</div>

使用一些 CSS 变量可以轻松控制：

.box {
  --s:10px; /* skewed part */
  --o:5px;  /* offset part */
  --c:#00a4ef; /* color */
 
  width:200px;
  height:100px;
  display:inline-block;
  margin:5px;
  position:relative;
  background:grey;
}

.box:before {
  content:attr(data-text);
  font-size:25px;
  padding:5px calc(10px + var(--s)) calc(5px + var(--o)) calc(10px + var(--o));
  position:absolute;
  top:10px;
  left:calc(-1*var(--o));
  background:
    linear-gradient(#000 0 0) bottom/100% var(--o) no-repeat
    var(--c);
  clip-path:polygon(0 0,100% 0,calc(100% - var(--s)) calc(100% - var(--o)),var(--o) calc(100% - var(--o)),var(--o) 100%,0 calc(100% - var(--o)))
}

<div class="box" data-text="test"></div>
<div class="box" data-text="another test" style="--c:red;--o:10px;--s:25px"></div>
<div class="box" data-text="another one" style="--c:yellow;--o:0px;--s:40px"></div>

Answer 2

请按以下方式修改您的 CSS。伪 after CSS 添加使其从右下角倾斜，并从 .ribbon 修改 box-shadow 以移除倾斜区域的可见阴影。

.container {
  width:80%;
  background:grey;
  display:block;
  min-height:500px;
  margin:0 auto;
}

.ribbon{
    color: #fff;
    margin: 30px 0 50px;
    position: relative;
    text-transform: uppercase;
    background: rgb(0, 164, 239);
    box-shadow: 0px 1px 3px rgb(0 0 0 / 0%);
    padding: 10px 15px;
    clear: both;
}

div.left_ribbon{
    color: #000;
    margin-left: -10px;
    float: left;
}

div.left_ribbon h2{
    margin: 0 12px;
  color:#fff;
}
div.left_ribbon::before{
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    content: "";
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgb(0, 80, 116);
}
div.left_ribbon::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: 47px solid grey;
    border-left: 23px solid rgb(0, 164, 239);
    width: 0;
}

<div class="container">
<div class="ribbon left_ribbon"><h2>Testing</h2></div>
</div>