三角形

实现一个三角形

<!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>

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. python进阶（22）pydantic--数据类型校验

    pydantic库的作用 pydantic库是一种常用的用于数据接口schema定义与检查的库. Pydantic 在运行时强制执行类型提示,并在数据无效时提供用户友好的错误信息. pydantic安 ...

  2. 应对gitee容量超限. 保留star/fork/评论

    应对gitee容量超限 进入企业版,"管理"-"仓库管理",点"清空仓库". 在E:\gitee目录上右击,"git bash h ...

  3. docker创建本地主机实例Virtualbox 驱动出错

    宿主机系统:Centos7 64位 创建主机实例Virtualbox 命令:docker-machine create -d virtualbox test 连接centos工具:Finalshell ...

  4. TDengine在浙商银行微服务监控中的实践

    作者:楼永红 王轩宇|浙商银行    浙商银行股份有限公司(简称"浙商银行")是 12 家全国性股份制商业银行之一,总部设在浙江杭州,全国第13家"A+H"上市 ...

  5. gitbook热更新时报错operation not permitted

    在使用gitbook写东西的时候,当文档内容有更新的时候,会自动更新内容到页面上,方便预览.但是,存在一个bug,就是会神奇的崩溃掉,出现如下的错误提示: Restart after change i ...

  6. vivo 全球商城：商品系统架构设计与实践

    一.前言 随着用户量级的快速增长,vivo官方商城v1.0的单体架构逐渐暴露出弊端:模块愈发臃肿.开发效率低下.性能出现瓶颈.系统维护困难. 从2017年开始启动的v2.0架构升级,基于业务模块进行垂 ...

  7. 『学了就忘』Linux基础命令 — 31、grep命令和通配符

    目录 1.grep命令介绍 2.find命令和grep命令的区别(重点) (1)find命令 (2)grep命令 3.通配符与正则表达式的区别 (1)通配符: (2)正则表达式: 1.grep命令介绍 ...

  8. Linux常用命令和快捷键整理：（1）常用命令

    前言: Linux常用快捷键和基本命令整理,先上思维导图: 1.ls命令 就是list的缩写,通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文件权限(包括目录.文件夹.文件权限) ...

  9. Hadoop HA集群 与 开发环境部署

    每一次 Hadoop 生态的更新都是如此令人激动 像是 hadoop3x 精简了内核,spark3 在调用 R 语言的 UDF 方面,速度提升了 40 倍 所以该文章肯定得配备上最新的生态 hadoo ...

  10. R数据分析：如何给结构方程画路径图，tidySEM包详解

    之前一直是用semPlot这个包给来进行结构方程模型的路径绘制,自从用了tidySEM这个包后就发现之前那个包不香了,今天就给大家分享一下tidySEM. 这个包的很大特点就是所有的画图原始都是存在数 ...