CSS 绘图【汇总】

简介: CSS 绘图【汇总】

长方形(矩形)

div 天然就是一个矩形

<div class="box rectangle"></div>
 
.box {
  height: 100px;
  width: 200px;
}
.rectangle {
  border: 1px solid red;
}

<div class="box rectangleBg"></div>
 
.box {
  height: 100px;
  width: 200px;
}
.rectangleBg {
  background-color: red;
}

正方形

将长方形设置为长=宽即可

<div class="box square"></div>
 
.box {
  height: 100px;
  width: 100px;
}
.square {
  border: 1px solid red;
}

圆角矩形

添加圆角样式即可

border-radius: 20px;
 

<div class="box roundedRectangle"></div>
 
 .box {
   height: 100px;
   width: 200px;
 }

 .roundedRectangle {
   border-radius: 20px;
   background-color: red;
 }

圆形

宽高相同的情况下,添加 50% 的圆角

border-radius: 50%;
 

<div class="box circle"></div>
 
.box {
  height: 100px;
  width: 100px;
}

.circle {
  border-radius: 50%;
  background-color: red;
}

三角形

使用border属性绘图

正三角形

<div class="triangle"></div>
 
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

斜三角形

如对话框左侧的斜三角

<div class="trapezoid"></div>
 
.trapezoid {
  width: 0px;
  border-width: 10px 4px;
  border-style: solid;
  border-color: #f30 #f30 transparent transparent;
}

梯形

<div class="trapezoid"></div>
 
.trapezoid {
  width: 80px;
  height: 80px;
  border: 80px solid;
  border-color: #f30 transparent transparent;
}

对话框

<div class="dialog"></div>
• 1
.dialog {
  width: 200px;
  height: 100px;
  background: red;
  position: relative;
}

.dialog:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 38px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 20px solid red;
  border-bottom: 10px solid transparent;
}

太极图

<div class="yin-yang"></div>
 
.yin-yang {
  width: 96px;
  height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}

.yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid red;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}

.yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}

钉子

https://blog.csdn.net/weixin_41192489/article/details/120281201


空白占位图

https://blog.csdn.net/weixin_41192489/article/details/120570358

目录
打赏
0
0
0
0
62
分享
相关文章
|
6月前
|
css 绘图——钉子
css 绘图——钉子
44 1
|
6月前
|
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
103 1
CSS绘图实现三角形并使用grid布局
CSS绘图实现三角形并使用grid布局
150 0
CSS绘图实现三角形并使用grid布局
CSS 奇思妙想 | Single Div 绘图技巧
CSS 奇思妙想 | Single Div 绘图技巧
137 0
CSS 奇思妙想 | Single Div 绘图技巧
CSS绘图实现三角形并使用grid布局
CSS绘图实现三角形并使用grid布局
157 0
CSS绘图实现三角形并使用grid布局
|
20天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
93 24
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
88 7
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
53 6