前言：前端性能优化中有一个准则是：能用css实现的图标（图片）就尽量用css去实现，达到减少图片使用的目的，从而减少从服务器请求的资源。该篇就说说怎么用边框border实现各种各样的形状。

一、圆形

<body><style>.shape1 { width:50px; height:50px; background-color:red; border-radius:50%;}</style><div class="shape1"></div>
</body>

二、扇形

<body><style>div { float:left; margin-right:30px; width:0; height:0; border:50px solid transparent; border-radius:50%; }.shape1 { border-bottom-color:red; }.shape2 { border-bottom-color:red; border-right-color:red; }.shape3 { border-bottom-color:red; border-right-color:red; -webkit-transform:rotate(45deg) }</style><div class="shape1"></div><div class="shape2"></div><div class="shape3"></div>
</body>

三、椭圆形

<body><style>div { float:left; margin-right:30px; }.shape1 { width:50px; height:100px; background-color:red; border-radius:30px;}.shape2 { width:100px; height:50px; background-color:red; border-radius:30px; }</style><div class="shape1"></div><div class="shape2"></div>
</body>

四、叶子形状

<body><style>.box { overflow:hidden; margin-bottom:5px; }.box div { float:left; margin-right:5px; width:50px; height:50px; background-color:red; }   .shape1 { border-radius:0 50% 0 50%; }.shape2 { border-radius:50% 0 50% 0; }</style><div class="box"><div class="shape1"></div><div class="shape2"></div></div><div class="box"><div class="shape2"></div><div class="shape1"></div></div>
</body>

五、角标

<body><style>div { width:0; height:0; float:left; margin-right:20px; border:50px solid red;  }.shape2 { border-bottom-color:transparent; }.shape3 { border-right-color:transparent; }</style><div class="shape1"></div><div class="shape2"></div><div class="shape3"></div>
</body>

六、等腰三角形

<body><style>div { width:0; height:0; float:left; margin-right:20px; border:50px solid transparent;  }.shape1 { border-top-color:red; border-left-color:red; }.shape2 { border-top-color:red; border-right-color:red; }.shape3 { border-bottom-color:red; border-left-color:red; }.shape4 { border-bottom-color:red; border-right-color:red; }</style><div class="shape1"></div><div class="shape2"></div><div class="shape3"></div><div class="shape4"></div>
</body>

七、等腰三角形（箭头）

<body><style>div { width:0; height:0; float:left; margin-right:20px; border:50px solid transparent;  }.shape1 { border-top-color:red; border-bottom:0; }.shape2 { border-bottom-color:red; border-top:0;}.shape3 { border-right-color:red; border-left:0;}.shape4 { border-left-color:red; border-right:0;}</style><div class="shape1"></div><div class="shape2"></div><div class="shape3"></div><div class="shape4"></div>
</body>

八、菱形

<body><style>div { width:0; height:0; border:50px solid transparent;  }.shape1 { border-top:70px solid red; border-bottom:0; }.shape2 { border-bottom:70px solid red; border-top:0;}</style><div class="shape2"></div><div class="shape1"></div>
</body>

九、直角三角形

<body><style>div { width:0; height:0; float:left; margin-right:20px; }.shape1 { border-top:50px solid red; border-right:100px solid transparent; }.shape2 { border-bottom:50px solid red; border-left:100px solid transparent; }</style><div class="shape1"></div><div class="shape2"></div>
</body>

直角三角形扩展应用

<body><style>.box { position:relative; width:200px; height:50px; border:2px solid red; border-radius:30px; }.box:after { content:''; position:absolute; bottom:-25px; left:30px; width:0; height:0; border-top:25px solid red; border-right:50px solid transparent; }</style><div class="box"></div>
</body>

十、直角梯形

<body><style>div { width:0; height:0; float:left; margin-right:20px; }.shape1 { border:50px solid red; border-right-color: transparent;  }.shape2 { border:50px solid red; border-right-color: transparent; border-bottom:0px; }.shape3 { border:50px solid red; border-right-color: transparent; border-top:0px; }</style><div class="shape1"></div><div class="shape2"></div><div class="shape3"></div>
</body>

十一、光晕效果

<body><style>.circle {position: relative;width: 200px; height: 200px;border-radius: 50%;background-image: linear-gradient(-45deg, #F3BCD9, #C45367);}   .halo {position: absolute;left: 10px;top: 10px;width: 100px;height: 70px;border-radius: 50%;background: radial-gradient(rgba(255,255,255,0.8) 0%, rgba(255, 255, 255, .4) 35%, rgba(255, 255, 255, .1) 60%, rgba(255, 255, 255, 0) 70%);transform: rotate(-34deg);}</style><div class="circle"><div class="halo"></div></div>
</body>

【css】用边框border实现各种各样的形状相关推荐

  1. CSS盒子边框(border)样式综合样式

    CSS盒子边框(border) 语法: border : border-width ll border-style ll border-color 边框的样式: none:没有边框即忽略所有边框的宽度 ...

  2. css样式 向下补白,div+css[3]：css中边框border与补白padding属性设置

    1.边框属性 border □ 边框样式 border-style:none|dotted|dashed|solid|...... none:没有边框. dotted点线 dashed虚线 solid ...

  3. CSS绘制各种各样的形状图形

    目录 实心圆 圆环(空心圆) 半圆 四分之一圆(扇形) 鸡蛋 椭圆 胶囊 三角形 月亮 编辑​​做折纸效果 目录 实心圆 圆环(空心圆) 半圆 四分之一圆(扇形) 鸡蛋 椭圆 胶囊 三角形 把不需要的 ...

  4. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  5. 3、CSS 边框border

    元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS边框属性允许你指定一个元素边框的样式和颜色. CSS 边框 ...

  6. css学习之border 边框

    边框,也就是盒子模型的四周, 1.四边相同边框border简写 #divcss5{border:1px solid #00F} CSS读取有从上到下.从左到右读取原理,而先设置了整个边框样式,后再加上 ...

  7. 边框border(HTML、CSS)

    边框border(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charse ...

  8. css边框(border)属性

    border属性 代码如下: border:边框宽度 边框风格 边框颜色; 如:border:5px solid #555; 属性: (1)边框宽度: border-width:5px; (2)边框颜 ...

  9. 【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )

    文章目录 一.网页布局本质 二.盒子模型 三.盒子边框 Border 1.CSS 2.0 文档查询 2.边框设置语法 3.边框设置综合写法 一.网页布局本质 构建一个网页 , 首先 , 创建盒子模型 ...

最新文章

  1. rcnn 改进mask_李沐团队提出最强ResNet改进版，多项任务达到SOTA | 已开源
  2. 在Azure上创建MYSQL服务
  3. C语言--指针函数和函数指针
  4. （39）通过 PID 获取 EPROCESS
  5. JavaScript中常用的BOM属性
  6. 判断字符串出现次数最多的字符 及 次数
  7. 剑指Offer - 面试题45. 把数组排成最小的数（字符串排序）
  8. 基于Java分词的ikanalyzer工具
  9. 34. Element textContent 属性
  10. iOS网络开发—POST请求和GET请求
  11. 离散数学及其应用第八版纠正（p29）：关于n皇后问题的SAT表示
  12. c++实现剧情小游戏：哈利波特
  13. 285个地级市的灯光数据（1992-2013年）和雾霾（PM2.5）数据（1998-2016年）
  14. Python3字符串前缀u、b、r
  15. LiveGBS-摄像机网页低延时无插件直播实现
  16. HTML5期末大作业：体育网页设计——篮球专题6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
  17. 12306系统架构，凭什么支撑每天如洪水般的各种抢票插件？
  18. excel中的宏如何用java表示_一文看懂RPA与Excel宏的区别
  19. Keras搭建CNN（手写数字识别Mnist）
  20. 复习《劝学》有感(一)

热门文章

  1. JavaScript 学习-48.$.ajaxSetup方法设置AJAX的全局默认设置
  2. .Net环境下有关打印页面设置、打印机设置、打印预览对话框的实现(开源)---转
  3. 将网卡设为混杂模式_如何将网卡设置为混杂模式
  4. java调用微信加密_微信登录授权, 并且解密加密内容获取手机号和地区
  5. 利用 scp 远程上传下载文件/文件夹
  6. Tensorflow 2.x源码详解之第三章：导数（梯度/GradientTape）
  7. 3S技术基础复习要点
  8. 注解@JsonIgnore的使用方法效果及其他相关注解应用
  9. JsonIgnore导致不能接收参数
  10. linux 输入法_新闻速读 gt; 百度输入法 Linux 版本发布 | Linux 中国