如何制作CSS曲线？ [英] How can I make css curved line?

问题描述

如何使css如下图所示：

How can I make css like this as picture below:

推荐答案

可以通过操纵边界半径来实现

Can be achieved using manipulating border radius

CSS

.graph {
    height: 100px;
    width: 200px;
    background: transparent;
    border-radius: 0px 0px 0px 370px/225px;
    border: solid 5px grey;
    border-top:none;
    border-right:none;
    margin:20px;
}

.graph:before {
    height:20px;
    width: 10px;
    border: 5px solid grey;
    border-radius: 30px 30px 0px 0px /75px 75px 0px 0px ; 
    display: block;
    content: "";
    border-bottom:none;
    position:relative;
    top: -9px;
    left: -12px;
}

HTML

<div class = "graph"><div>

https://jsfiddle.net/u663m81s/

这篇关于如何制作CSS曲线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！