在CSS中绘制一个带圆角底部的三角形？ [英] Drawing a triangle with rounded bottom in CSS?

问题描述

在CSS中，我可以绘制如下三角形：

  .triangle {
 width：0px; 
 height：0px; 
 border-style：solid; 
 border-width：0 200px 200px 0; 
 border-color：透明＃48a665透明透明; 
} 
 
< div class =triangle>< / div> 
  

In css I can draw a triangle as following:

.triangle{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 200px 200px 0;
    border-color: transparent #48a665 transparent transparent;
}

<div class="triangle"></div>

Jsfiddle

Now I want to draw a triangle with rounded at bottom like this:

Is it possible to make it with CSS?

解决方案

So we create a circle and place it on top to make it look like how you want it, you get something like this:

CSS:

.triangle{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 200px 200px 0;
    border-color: transparent #48a665 transparent transparent;
}
.triangle:after {
    content: "";
    display: block;
    width: 400px;
    height: 400px;
    background: #fff;
    border-radius: 200px;
    left: -190px;
    position: absolute;
}

You need to set the background color (currently #fff ) to match the background it is placed on.

DEMO HERE

这篇关于在CSS中绘制一个带圆角底部的三角形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！