Trying to create this css ribbon. Struggling with the curve of the ribbon

只谈情不闲聊 提交于 2021-02-10 04:30:42

问题


This is a ribbon image

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;
}

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


回答1:


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>



回答2:


Here's a starting point for you.

.ribbon {
  --ribbon-height: 50px;
  display: inline-block;
  min-width: 150px;
  background-color: green;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  position: relative;
  height: var(--ribbon-height);
  line-height: var(--ribbon-height);
  border-radius: 0 0 0 calc(var(--ribbon-height) / 2);
  text-align: right;
  margin: 0 0 0 calc(var(--ribbon-height) / 2);
  padding-right: 20px;
}

.ribbon::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: calc(-0.31* var(--ribbon-height));
  height: 80%;
  width: 50%;
  background-color: green;
  transform: skew(45deg, 0deg);
}
<div class="ribbon">
  Hello
</div>


来源:https://stackoverflow.com/questions/57382396/trying-to-create-this-css-ribbon-struggling-with-the-curve-of-the-ribbon

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!