每日练习:用css画图形,菱形,四种三角形,实心圆,空心圆

AlisaClass 2019-11-04

用css画菱形

代码:

<html>
<body>

<style>
  .div1{
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #bbbbbb;
  }
  .div2{
    width: 0;
    height: 0;
    border-bottom: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #bbbbbb;
  }
</style>

<div class="div1"></div>
<div class="div2"></div>

</body>
</html>

每日练习:用css画图形,菱形,四种三角形,实心圆,空心圆

用css画四种三角形:

代码:

<html>
<body>

<style>
  .div1{
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #bbbbbb;
  }
  .div2{
    width: 0;
    height: 0;
    border-bottom: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid red;
  }
  .div3{
    width: 0;
    height: 0;
    border-bottom: 40px solid transparent;
    border-top: 40px solid transparent;
    border-right: 40px solid transparent;
    border-left: 40px solid black;
  }
  .div4{
    width: 0;
    height: 0;
    border-bottom: 40px solid transparent;
    border-left: 40px solid transparent;
    border-top: 40px solid transparent;
    border-right: 40px solid burlywood;
  }
</style>

<div class="div1"></div>
<div style="margin: 40px;"></div>
<div class="div2"></div>
<div style="margin: 40px;"></div>
<div class="div3"></div>
<div style="margin: 40px;"></div>
<div class="div4"></div>

</body>
</html>

效果图:

每日练习:用css画图形,菱形,四种三角形,实心圆,空心圆

用css画实心圆空心圆:

代码:

<html>
<body>
    <style>
        .circle{
            width: 100px;
            height: 100px;
            background-color: #a72525;
            border-radius: 100px;
        }
        .circle1{
            width: 100px;
            height: 100px;
            background-color: #ffffff;
            border: 3px solid #a72525;
            border-radius: 100px;
        }
    </style>
<div class="circle"></div>
<div style="margin-top: 40px;"></div>
<div class="circle1"></div>
<div style="margin-top: 40px;"></div>
<div class="circle1"></div>
</body>

</html>

效果图:

每日练习:用css画图形,菱形,四种三角形,实心圆,空心圆

相关推荐

startXUEBA / 0评论 2016-05-30