master

分支 (1)

管理

管理

master

Web-Study
/
CSS绘制常见图形.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS画图形</title>
  <style>
    div {
      background: gray;
      margin: 20px;
    }

    .square {
      height: 100px;
      width: 100px;
    }

    .rectangle {
      height: 100px;
      width: 200px;
    }

    .circle {
      height: 100px;
      width: 100px;
      border-radius: 50%;
    }

    .oval {
      margin: 0 50px;
      height: 100px;
      width: 200px;
      border-radius: 100px / 50%;
    }

    .triangle-origin {
      width: 20px;
      height: 20px;
      border-top: 100px solid black;
      border-right: 100px solid red;
      border-bottom: 100px solid blue;
      border-left: 100px solid orange;
    }

    .isosceles-triangle {
      width: 0px;
      height: 0px;
      border-right: 50px solid transparent;
      border-left: 50px solid transparent;
      border-bottom: 100px solid blue;
    }

    .regular-triangle {
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-left: 100px solid transparent;
      border-bottom: 150px solid blue;
    }


    .triangle-up {
      width: 0px;
      height: 0px;
      border-right: 50px solid transparent;
      border-left: 50px solid transparent;
      border-bottom: 100px solid blue;
    }

    .triangle-down {
      width: 0px;
      height: 0px;
      border-right: 50px solid transparent;
      border-left: 50px solid transparent;
      border-top: 100px solid blue;
    }

    .triangle-left {
      width: 0px;
      height: 0px;
      border-bottom: 50px solid transparent;
      border-top: 50px solid transparent;
      border-right: 100px solid blue;
    }

    .triangle-right {
      width: 0px;
      height: 0px;
      border-bottom: 50px solid transparent;
      border-top: 50px solid transparent;
      border-left: 100px solid blue;
    }

    .triangle-topleft {
      width: 0;
      height: 0;
      border-right: 100px solid transparent;
      border-top: 100px solid red;
    }

    .triangle-topright {
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-top: 100px solid red;
    }

    .triangle-rightbottom {
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-bottom: 100px solid red;
    }

    .triangle-leftbottom {
      width: 0;
      height: 0;
      border-right: 100px solid transparent;
      border-bottom: 100px solid red;
    }

    .talkbubble {
      width: 120px;
      height: 80px;
      background: red;
      position: relative;
      border-radius: 10px;
    }

    .talkbubble:before {
      content:"";
      position: absolute;
      right: 100%;
      top: 26px;
      width: 0;
      height: 0;
      border-top: 13px solid transparent;
      border-right: 26px solid red;
      border-bottom: 13px solid transparent;
    }

    .heart {
      position: relative;
      width: 100px;
      height: 90px;
    }
    .heart:before,
    .heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 10px;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    .heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin :100% 100%;
    }
  </style>
</head>
<body>
  正方形
  <div class="square"></div>
  长方形
  <div class="rectangle"></div>
  圆
  <div class="circle"></div>
  椭圆
  <div class="oval"></div>
  画三角形原理
  <div class="triangle-origin"></div>
  <strong>三角形的上下左右的方向确认其实是向哪个方向哪个方向就没有</strong><br />
  等腰三角形
  <div class="isosceles-triangle"></div>
  等边三角形
  <div class="regular-triangle"></div>
  上三角形(transparent默认父元素的颜色)
  <div class="triangle-up"></div>
  下三角形
  <div class="triangle-down"></div>
  左三角形
  <div class="triangle-left"></div>
  右三角形
  <div class="triangle-right"></div>
  <strong>(左上 <- 右上 )</strong><br />
  左上三角形
  <div class="triangle-topleft"></div>
  <strong>(左上 -> 右上 )</strong><br />
  右上三角形
  <div class="triangle-topright"></div>
  <strong>(左下 -> 右下 )</strong><br />
  右下三角形
  <div class="triangle-rightbottom"></div>
  <strong>(左下 <- 右下 )</strong><br />
  左下三角形
  <div class="triangle-leftbottom"></div>
  会话框
  <div class="talkbubble"></div>
  爱心
  <div class="heart"></div>
</body>
</html>