tofacebook.com -专业IT技术社区 CSS各种形状的div样式 Web程序 - tofacebook.com-专业IT技术社区
143°

CSS各种形状的div样式 Web程序

标签:gpo   三角形   pos   top   relative   border   clip   arc   order   

<html>
<head>
    <title>shape</title>
    <style type="text/css">
    .parent{
        position:relative;width:100px;height:100px;
    }
    .rect{
        width: 100px;
        height: 100px;
        background: red;
        line-height: 100px;
        text-align: center;
        color: white;
    }
    .circle{
      width: 100px;
      height: 100px;
      background: red;
      line-height: 100px;
      text-align: center;
      color: white;
      border-radius: 50%;
    }  
    .ellipse{
      width: 100px;
      height: 50px;
      background: red;
      line-height: 50px;
      text-align: center;
      color: white;
      border-radius: 50%;
    }  
    .semi-circle{
      width: 100px;
      height: 50px;
      background: red;
      line-height: 50px;
      text-align: center;
      color: white;
      border-radius: 200px 200px 0 0;
    }  
    .sector{
      width: 100px;
      height: 100px;
      background: red;
      line-height: 100px;
      text-align: center;
      color: white;
      border-radius: 200px 0 0 0;
    }  
    .arc{
      width: 100px;
      height: 100px;
      background: red;
      line-height: 100px;
      text-align: center;
      color: white;
      border-radius: 100px 0 100px 0;
    }  
    .triangle{
      width: 0px;
      height: 0px;
      border-width: 100px;
      border-style: solid;
      border-top-color: black;
      border-bottom-color: green;
      border-left-color: yellow;
      border-right-color: gray;
    }  
    .arrow{
      width: 0px;
      height: 0px;
      border-width: 100px;
      border-style: solid;
      border-top-color: black;
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }  
    .triangle2{
      width: 50px;
      height: 50px;
      border-width: 50px;
      border-style: solid;
      border-top-color: black;
      border-bottom-color: green;
      border-left-color: transparent;
      border-right-color: transparent;
    }  
    .triangle3{
      width: 100px;
      height: 100px;
      border-width: 10px;
      border-style: solid;
      border-top-color: black;
      border-bottom-color: green;
      border-left-color: transparent;
      border-right-color: transparent;
      border-radius: 50%;
    }  
    .triangle4{
        width: 50px;
        height: 50px;
        border-width: 10px;
        border-style: solid;
        border-top-color: black;
        border-bottom-color: green;
        border-left-color: red;
        border-right-color: transparent;
        border-radius: 50%;
        clip: rect(0 50px 70px 0);
        left: 0;
        top: 0;
        position: absolute;
    }
    .triangle5{
        width: 100px;
        height: 100px;
        border-top: 10px solid black;
        border-radius: 100px;
    } 
    </style>
</head>
<body>
<!-- square -->
<div class=‘rect‘>正方形</div>
<xmp> 
div{
  width: 100px;
  height: 100px;
  background: red;
  line-height: 100px;
  text-align: center;
  color: white;
}  
</xmp>
<!-- circle -->
<div class=‘circle‘>圆形</div>
<xmp> 
.circle{
  width: 100px;
  height: 100px;
  background: red;
  line-height: 100px;
  text-align: center;
  color: white;
  border-radius: 50%;
}  
</xmp>
<!-- ellipse -->
<div class=‘ellipse‘>椭圆</div>
<xmp> 
.ellipse{
  width: 100px;
  height: 50px;
  background: red;
  line-height: 50px;
  text-align: center;
  color: white;
  border-radius: 50%;
}  
</xmp>
<!-- semi circle -->
<div class=‘semi-circle‘>半圆</div>
<xmp> 
.semi-circle{
  width: 100px;
  height: 50px;
  background: red;
  line-height: 50px;
  text-align: center;
  color: white;
  border-radius: 100px 100px 0 0;
}  
</xmp>
<!-- sector -->
<div class=‘sector‘>扇形</div>
<xmp> 
.sector{
  width: 100px;
  height: 100px;
  background: red;
  line-height: 100px;
  text-align: center;
  color: white;
  border-radius: 200px 0 0 0;
}  
</xmp>
<!-- arc -->
<div class=‘arc‘>弧形</div>
<xmp> 
.arc{
  width: 100px;
  height: 100px;
  background: red;
  line-height: 100px;
  text-align: center;
  color: white;
  border-radius: 100px 0;
}  
</xmp>
<!-- triangle -->
<div class=‘triangle‘>三角形</div>
<xmp> 
.triangle{
  width: 0px;
  height: 0px;
  border-width: 100px;
  border-style: solid;
  border-top-color: black;
  border-bottom-color: green;
  border-left-color: yellow;
  border-right-color: gray;
}  
</xmp>
<!-- arrow -->
<div class=‘arrow‘>三角形</div>
<xmp> 
.arrow{
  width: 0px;
  height: 0px;
  border-width: 100px;
  border-style: solid;
  border-top-color: black;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}  
</xmp>
<div class=‘triangle2‘></div>
<xmp> 
.triangle2{
  width: 50px;
  height: 50px;
  border-width: 50px;
  border-style: solid;
  border-top-color: black;
  border-bottom-color: green;
  border-left-color: transparent;
  border-right-color: transparent;
}  
</xmp>
<div class=‘triangle3‘></div>
<xmp> 
.triangle3{
  width: 50px;
  height: 50px;
  border-width: 50px;
  border-style: solid;
  border-top-color: black;
  border-bottom-color: green;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
}  
</xmp>
<div class="parent">
    <div class=‘triangle4‘></div>
</div>
<xmp> 
.triangle4{
    width: 50px;
    height: 50px;
    border-width: 10px;
    border-style: solid;
    border-top-color: black;
    border-bottom-color: green;
    border-left-color: red;
    border-right-color: transparent;
    border-radius: 50%;
    clip: rect(0 50px 70px 0);
    left: 0;
    top: 0;
    position: absolute;
}  
</xmp>

<div class=‘triangle5‘></div>
<xmp> 
.triangle5{
    width: 100px;
    height: 100px;
    border-top: 10px solid black;
    border-radius: 100px;
}  
</xmp>
    

</body>
</html>

 

CSS各种形状的div样式

标签:gpo   三角形   pos   top   relative   border   clip   arc   order   

原文地址:https://www.cnblogs.com/lay2017/p/8572788.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: