CSS相关，手画三角形，正方形，扇形

三角形

实现一个三角形

<!DOCTYPE html>
<html>
<head>
  <title>三角形</title>
  <style type="text/css">
    .box1, .box2, .box3, .box4 {
      height: 0px;
      width: 0px;
      float: left;
      border-style: solid;
      margin: 10px;
    }
    .box1 { /* 等腰直角 */
      border-width: 100px;
      border-color: tomato transparent transparent transparent;
    }
    .box2 { /* 等边 */
      border-width: 100px 173px;
      border-color: transparent tomato transparent transparent;
    }
    .box3 { /* 等腰 */
      border-width: 100px 80px;
      border-color: transparent transparent tomato transparent;
    }
    .box4 { /* 其他 */
      border-width: 100px 90px 80px 70px;
      border-color: transparent transparent transparent tomato;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</body>
</html>

正方形

使用 css 实现一个宽高自适应的正方形

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    /* 都是像对于屏幕宽度的比例 */
    .square1 {
      width: 10%;
      height: 10vw;
      background: red;
    }

    /* margin/padding 百分比是相对父元素 width 的 */
    .square2 {
      width: 20%;
      height: 0;
      padding-top: 20%;
      background: orange;
    }

    /* 通过子元素 margin */
    .square3 {
      width: 30%;
      overflow: hidden;
      /* 触发 BFC */
      background: yellow;
    }

    .square3::after {
      content: '';
      display: block;
      margin-top: 100%;
      /* 高度相对于 square3 的 width */
    }
  </style>
</head>
<!-- 画一个正方形 -->

<body>
  <div class="square1"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</body>

</html>

扇形

实现一个 1/4 圆、任意弧度的扇形

有多种实现方法，这里选几种简单方法（我看得懂的）实现。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 通过 border 和 border-radius 实现 1/4 圆 */
    .sector1 {
      height: 0;
      width: 0;
      border: 100px solid;
      border-radius: 50%;
      border-color: turquoise tomato tan thistle;
    }

    /* 类似三角形的做法加上父元素 overflow: hidden; 也可以实现任意弧度圆 */
    .sector2 {
      height: 100px;
      width: 200px;
      border-radius: 100px 100px 0 0;
      overflow: hidden;
    }

    .sector2::after {
      content: '';
      display: block;
      height: 0;
      width: 0;
      border-style: solid;
      border-width: 100px 58px 0;
      border-color: tomato transparent;
      transform: translate(42px, 0);
    }

    /* 通过子元素 rotateZ 和父元素 overflow: hidden 实现任意弧度扇形（此处是60°） */
    .sector3 {
      height: 100px;
      width: 100px;
      border-top-right-radius: 100px;
      overflow: hidden;
      /* background: gold; */
    }

    .sector3::after {
      content: '';
      display: block;
      height: 100px;
      width: 100px;
      background: tomato;
      transform: rotateZ(-30deg);
      transform-origin: left bottom;
    }

    /* 通过 skewY 实现一个60°的扇形 */
    .sector4 {
      height: 100px;
      width: 100px;
      border-top-right-radius: 100px;
      overflow: hidden;
    }

    .sector4::after {
      content: '';
      display: block;
      height: 100px;
      width: 100px;
      background: tomato;
      transform: skewY(-30deg);
      transform-origin: left bottom;
    }

    /* 通过渐变设置60°扇形 */
    .sector5 {
      height: 200px;
      width: 200px;
      background: tomato;
      border-radius: 50%;
      background-image: linear-gradient(150deg, transparent 50%, #fff 50%),
        linear-gradient(90deg, #fff 50%, transparent 50%);
    }
  </style>
</head>

<body>
  <div style="display: flex; justify-content: space-around;">
    <div class="sector1"></div>
    <div class="sector2"></div>
    <div class="sector3"></div>
    <div class="sector4"></div>
    <div class="sector5"></div>
  </div>
</body>

</html>

 

posted @ 2020-04-27 22:33  Magi黄元  阅读(454)  评论(0)  编辑  收藏  举报