css_html/css_WEB-ITnose でグラフィックを描画する

CSSのborder-radius属性を上手に使うと綺麗なグラフィックも描けます

htmlパート

css パート

div{
margin: 8px;
}
.rectangle{
width: 250px;
height: 150px;
background: #6DC75F;;
}
/*triangle*/
.sanjia{
border -左: 75 ピクセルのソリッド透明;
ボーダー右: 75 ピクセルのソリッド透明;
ボーダー下: 150 ピクセルのソリッド #6DC75F;
幅: 0;
高さ: 0;
}
/*ellipse*/
.tuoyuan{
幅: 300px;
高さ: 150px;
背景: #6DC75F;
border-radius: 150px/75px;
-webkit-border-radius: 150px/75px;
-moz-border-radius: 150px/75px;
}
/*moon*/
.yueliang{
width: 150px;
height: 150px;
/*background: #6DC75F;*/
border-radius: 50%;
box-shadow: 15px 15px 0 0 green;
}
/*葉*/
.shuye{
幅: 150px;
高さ: 150px;
背景: #6DC75F;
境界半径: 40px 300px 5px 300px;
}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。