尝试创建此CSS功能区.在色带曲线上挣扎 [英] Trying to create this css ribbon. Struggling with the curve of the ribbon

问题描述

我尝试使用边界半径创建此CSS形状(功能区)，但无法这样做，我能够获得的曲线与图像中的div曲线不完全匹配.

I've tried to create this css shape (ribbon) using border radius but I'm unable to do so, the curve I'm able to get isn't exactly matching the div's curve in the image.

background: #008712;
  width: 89px;
  height: 22px;
  box-shadow: #d0dae0;
  background-color: #008712;
  border-bottom-left-radius: 70px;
}

如果我能正确地解决问题，那么我会尽可能避免svgs.

If I get this curve right that solves the problem, I would like avoid svgs if possible.

推荐答案

使用伪元素进行某些偏斜转换:

Use pseudo element with some skew transformation:

.box {
  width:200px;
  padding:8px;
  font-size:25px;
  color:#fff;
  position:relative;
  overflow:hidden;
  text-align:right;
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:green;
  border-bottom-left-radius:20px;
  transform:skewX(28deg);
  transform-origin:top;
}

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

这篇关于尝试创建此CSS功能区.在色带曲线上挣扎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！