三角形

实现一个三角形

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>三角形</title>
  5.   <style type="text/css">
  6.     .box1, .box2, .box3, .box4 {
  7.       height: 0px;
  8.       width: 0px;
  9.       float: left;
  10.       border-style: solid;
  11.       margin: 10px;
  12.     }
  13.     .box1 { /* 等腰直角 */
  14.       border-width: 100px;
  15.       border-color: tomato transparent transparent transparent;
  16.     }
  17.     .box2 { /* 等边 */
  18.       border-width: 100px 173px;
  19.       border-color: transparent tomato transparent transparent;
  20.     }
  21.     .box3 { /* 等腰 */
  22.       border-width: 100px 80px;
  23.       border-color: transparent transparent tomato transparent;
  24.     }
  25.     .box4 { /* 其他 */
  26.       border-width: 100px 90px 80px 70px;
  27.       border-color: transparent transparent transparent tomato;
  28.     }
  29.   </style>
  30. </head>
  31. <body>
  32.   <div class="box1"></div>
  33.   <div class="box2"></div>
  34.   <div class="box3"></div>
  35.   <div class="box4"></div>
  36. </body>
  37. </html>

正方形

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

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title></title>
  7.   <style>
  8.     /* 都是像对于屏幕宽度的比例 */
  9.     .square1 {
  10.       width: 10%;
  11.       height: 10vw;
  12.       background: red;
  13.     }
  14.  
  15.     /* margin/padding 百分比是相对父元素 width 的 */
  16.     .square2 {
  17.       width: 20%;
  18.       height: 0;
  19.       padding-top: 20%;
  20.       background: orange;
  21.     }
  22.  
  23.     /* 通过子元素 margin */
  24.     .square3 {
  25.       width: 30%;
  26.       overflow: hidden;
  27.       /* 触发 BFC */
  28.       background: yellow;
  29.     }
  30.  
  31.     .square3::after {
  32.       content: '';
  33.       display: block;
  34.       margin-top: 100%;
  35.       /* 高度相对于 square3 的 width */
  36.     }
  37.   </style>
  38. </head>
  39. <!-- 画一个正方形 -->
  40.  
  41. <body>
  42.   <div class="square1"></div>
  43.   <div class="square2"></div>
  44.   <div class="square3"></div>
  45. </body>
  46.  
  47. </html>

扇形

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <style>
  10.     /* 通过 border 和 border-radius 实现 1/4 圆 */
  11.     .sector1 {
  12.       height: 0;
  13.       width: 0;
  14.       border: 100px solid;
  15.       border-radius: 50%;
  16.       border-color: turquoise tomato tan thistle;
  17.     }
  18.  
  19.     /* 类似三角形的做法加上父元素 overflow: hidden; 也可以实现任意弧度圆 */
  20.     .sector2 {
  21.       height: 100px;
  22.       width: 200px;
  23.       border-radius: 100px 100px 0 0;
  24.       overflow: hidden;
  25.     }
  26.  
  27.     .sector2::after {
  28.       content: '';
  29.       display: block;
  30.       height: 0;
  31.       width: 0;
  32.       border-style: solid;
  33.       border-width: 100px 58px 0;
  34.       border-color: tomato transparent;
  35.       transform: translate(42px, 0);
  36.     }
  37.  
  38.     /* 通过子元素 rotateZ 和父元素 overflow: hidden 实现任意弧度扇形（此处是60°） */
  39.     .sector3 {
  40.       height: 100px;
  41.       width: 100px;
  42.       border-top-right-radius: 100px;
  43.       overflow: hidden;
  44.       /* background: gold; */
  45.     }
  46.  
  47.     .sector3::after {
  48.       content: '';
  49.       display: block;
  50.       height: 100px;
  51.       width: 100px;
  52.       background: tomato;
  53.       transform: rotateZ(-30deg);
  54.       transform-origin: left bottom;
  55.     }
  56.  
  57.     /* 通过 skewY 实现一个60°的扇形 */
  58.     .sector4 {
  59.       height: 100px;
  60.       width: 100px;
  61.       border-top-right-radius: 100px;
  62.       overflow: hidden;
  63.     }
  64.  
  65.     .sector4::after {
  66.       content: '';
  67.       display: block;
  68.       height: 100px;
  69.       width: 100px;
  70.       background: tomato;
  71.       transform: skewY(-30deg);
  72.       transform-origin: left bottom;
  73.     }
  74.  
  75.     /* 通过渐变设置60°扇形 */
  76.     .sector5 {
  77.       height: 200px;
  78.       width: 200px;
  79.       background: tomato;
  80.       border-radius: 50%;
  81.       background-image: linear-gradient(150deg, transparent 50%, #fff 50%),
  82.         linear-gradient(90deg, #fff 50%, transparent 50%);
  83.     }
  84.   </style>
  85. </head>
  86.  
  87. <body>
  88.   <div style="display: flex; justify-content: space-around;">
  89.     <div class="sector1"></div>
  90.     <div class="sector2"></div>
  91.     <div class="sector3"></div>
  92.     <div class="sector4"></div>
  93.     <div class="sector5"></div>
  94.   </div>
  95. </body>
  96.  
  97. </html>

CSS相关，手画三角形，正方形，扇形的更多相关文章

  1. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  2. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  3. 用CSS border相关属性画三角形

    效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0J ...

  4. Sass mixin 使用css border属性画三角形

    To be finished. //triangle@mixin css-triangle ($direction: "down", $size: 20px, $color: #0 ...

  5. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  6. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  7. css伪元素before/after和画三角形的搭配应用

    想要实现的效果如下: 第一步:如何用css画出三角形? /* css画三角形 */ .sanjiao{ ; border-top:40px solid red; border-bottom:40px ...

  8. css画三角形原理解析

    <div id="div1"></div><div id="div2"></div><div id=&qu ...

  9. HTML 和 CSS 画三角形和画多边行基本原理及实践

    基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...

随机推荐

  1. Harbour.Space Scholarship Contest 2021-2022 (Div. 1 + Div. 2) Editorial题解

    A 略,发现只有当末尾为9时才满足条件.. B 简单模拟,注意数组大小!!! C 简单模拟. D 比较暴力的一个做法就是每次找一个开始匹配的起始点,然后每次不同时向后跳2就行了. 注意这里最后还要判断 ...

  2. Spring事务不生效问题

    事务未生效可能造成严重的数据不一致性问题,因而保证事务生效至关重要.Spring事务是通过Spring aop实现的,所以不生效的本质问题是spring aop没生效,或者说没有代理成功,所以有必要了 ...

  3. 使用jax加速Hamming Distance的计算

    技术背景 一般认为Jax是谷歌为了取代TensorFlow而推出的一款全新的端到端可微的框架,但是Jax同时也集成了绝大部分的numpy函数,这就使得我们可以更加简便的从numpy的计算习惯中切换到G ...

  4. 在线编辑Word——插入图表

    在Word中可插入图表,配合使用表格能够更加全方位的展示数据的可信度并增加数据的可读性.本文将通过使用在线编辑器 Spire.Cloud Word 演示如何来插入图表,并设置相关格式化操作.具体步骤如 ...

  5. [第二章]c++学习笔记2（类和对象的基础3）

    隐藏的概念 隐藏的作用 使用例 成员函数的重载与缺省(附使用例) 注意事项

  6. 【linux系统】命令学习（二）文件处理命令

    查看帮助 1.--help     例如:ls --help  会有中文 2.man       例如:man ls   都是英文 进入手册的界面 空格键:向下翻页 回车:一行一行翻页 B:向前翻页 ...

  7. python实现高斯滤波

    一,定义 核是:3 *3     均值滤波 二,高斯函数 Y方向的方差与X方向的一致.处理后图像看起来更模糊(滤波明显)的话,核要更大. (三)代码实现 (四)核计算 (五)图像产生高斯噪声循环代码实 ...

  8. java-TCP协议发送和接收数据

    TCP协议接收数据的步骤: A:创建接收数据的Socket对象 创建对象的时候要指定端口 B:监听客户端连接 等待客户端连接 C:获取Socket对象的输入流(字节流) D:读数据,并显示在控制台 E ...

  9. [luogu7599]雨林跳跃

    为了方便,令$a_{0}=a_{n+1}=\infty$,另外$a_{i}$是两两不同的 记$L_{x}$和$R_{x}$分别为$x$左右两侧第一个比$a_{x}$大的元素位置,可以$o(n)$预处理 ...

  10. [bzoj1934]善意的投票

    最小割,考虑最小割就是要将整张图分为两块,本题中就分别表示赞同和不赞同,那么首先一开始赞同的点向S连边,不赞同的点向T连边,如果这些点分到了另一边就要割掉这条边,朋友关系同理,连双向边同样表示分到两边 ...