用div画三角/矩形/圆

最新推荐文章于 2024-09-05 14:01:36 发布

weixin_30412013

最新推荐文章于 2024-09-05 14:01:36 发布

阅读量595

点赞数 1

原文链接：http://www.cnblogs.com/sarah-wen/p/10780432.html

版权

1. 画三角

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
    .triangle {
        width: 0;
        height: 0;
        border: solid;
        border-width:100px 100px 100px 100px;
        border-color:transparent transparent bule transparent;
    }
    </style>
</head>
<body>
    <div class="triangle"></div>

</body>
</html>

结果如下

（边框颜色border-color四个值默认的加载方向，top right bottom left）：

宽高为0时：

2. 画一个矩形

把上述的left/right/top/bottom去掉任意一边，然后把颜色都设成蓝色不就行了

.rectangle {
        background-color: red;
        width: 0;
        height: 0;
        border: solid;
        border-width:0px 100px 100px 100px;
        border-color:blue;
    }

3. 画一条线

如图所示是一条长200px, 粗0.5px的线。

.line {
        width: 0px;
        height: 0px;
        border: solid;
        border-width:0 100px 0.5px 100px;
        border-color:red;
    }

4. 画一个圆

使用到border-radius.

<!DOCTYPE html>
<html>
<head>
    <title>画一个圆，圆心有字</title>
    <meta charset="utf-8">
    <style type="text/css">
        .circle {
            width: 100px;
            height: 100px;
            border: solid 2px;
            border-radius: 50px;
            /*background-color: red;*/
            text-align: center;
            line-height: 100px;//这样才能使文字处于圆心处
            background: rgba(255, 0, 0, 1)/*设置透明度*/
        }
    </style>
</head>
<body>
    <div class="circle">圆心</div>

</body>
</html>