首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧

作者：燕阳阳消_469 | 来源：互联网 | 2023-05-16 19:53
1.矩形绘制矩形应该是最简单的了，直接设置div的宽和高，填充颜色，效果就出来了。2.圆角矩形绘制圆角矩形也很简单，在1的基础上，在
1.矩形
绘制矩形应该是最简单的了，直接设置div的宽和高，填充颜色，效果就出来了。

2.圆角矩形
绘制圆角矩形也很简单，在1的基础上，在使用css3的border-radius，即可。

3.圆
根据圆的特性，在2的基础上，设置div的宽和高一直，为正方形，然后设置border-radius为50%即可。

4.椭圆
椭圆也很简单了，只需要在3的基础上，让div的宽和高不一致即可。为了更好看，建议宽设置为高的1.5倍。

5.三角形
三角形相对其他来说，就有点难了。这里我们要用到border-style属性在配合分别设置四个边的border的宽度来实现。最终效果见下面的代码。

6.弧
本质上是利用圆角来实现，现在需要把矩形的左上角的圆角绘制成弧形，那么把右边和底边border的宽度设成0px，让他们不可见，设置左上角圆角的半径，让其变大，看得明显些，其余的圆角半径全都设成0px，这样一个弧形就完成了。

7.平行四边形
平行四边形是在矩形的基础上运用了一个CSS3的transform属性。使用了变形效果。

8.六角星
六角星是使用了一个“:after”制作了另一个反方向的三角形，在定位层叠到一起，从而形成六角星，说白一点就是两个三角拼在一起变成了六角星。

9.五角星
五角星主要也是使用了CSS3的transform属性，并配合“:after”来使用。

10.心形、阴阳图、Point Burst、仿微信消息框、Pac-Man等就不一一举例了，大家直接看代码。


----------------------------------------------
.rectangle {
width: 150px;
height: 100px;
background-color: orangered;
margin-bottom: 5px;
}

.rounded-rectangle {
width: 150px;
height: 100px;
background-color: orangered;
border-radius: 10%;
margin-bottom: 5px;
}

.circle {
width: 100px;
height: 100px;
background-color: orangered;
border-radius: 50%;
margin-bottom: 5px;
}

.ellipse {
width: 150px;
height: 100px;
background-color: orangered;
border-radius: 50%;
margin-bottom: 5px;
}

.triangle {
width: 0px;
height: 0px;
border-style: solid;
background-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: blue;
border-left-color: transparent;
border-top-width: 50px;
border-bottom-width: 50px;
border-left-width: 50px;
border-right-width: 50px;
margin-bottom: 5px;
}

.line {
width: 100px;
height: 3px;
background-color: orangered;
margin-bottom: 5px;
}

.arc {
width: 100px;
height: 100px;
border-style: solid;
border-top-width: 10px;
border-bottom-width: 0px;
border-left-width: 10px;
border-right-width: 0px;
border-top-color: blue;
border-bottom-color: red;
border-left-color: red;
border-right-color: red;
background-color: transparent;
border-top-right-radius: 0px;
border-top-left-radius: 100px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

.parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
background: red;
margin-top: 20px;
margin-left: 20px;
}

.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}

.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

.star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}

.star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
transform: rotate(-35deg);
}

.star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
transform: rotate(-70deg);
content: '';
}

.heart {
width: 160px;
height: 200px;
position: relative
}

.heart:before {
content: " ";
border: 0 solid transparent;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px 100px 0 0;
width: 80px;
height: 120px;
background: #669;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position: absolute;
left: 20px;
}

.heart:after {
content: " ";
border: 0 solid transparent;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px 100px 0 0;
width: 80px;
height: 120px;
background: #669;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position: absolute;
left: 48px;
top: 0px;
}

.pac-man {
width: 0px;
height: 0px;
border: 60px solid red;
border-color: red transparent red red;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}

.talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-left: 20px;
margin-bottom: 20px;
}

.talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
margin-left: 20px;
margin-bottom: 20px;
}

.burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
margin-left: 20px;
}

.burst-12:before,
.burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}

.burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}

.burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

.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;
}

推荐阅读
  • js

    一篇文章搞定css3 3d效果

    一篇文章搞定css3 3d效果
    css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]
  • js

    使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能

    使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能 ... [详细]
  • js

    CSS3 实现鼠标悬停时滚动菜单的流畅过渡效果

    CSS3 实现鼠标悬停时滚动菜单的流畅过渡效果 ... [详细]
  • string

    前端开发必备知识点汇总与深入解析

    Markdown语法说明：http:www.appinn.commarkdown1、前端碎片知识总结篇1.1关于浏览器IE的内核是Trident、Mozilla的内核 ... [详细]
  • string

    如何使用JavaScript动态设置CSS3属性值

    这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读 ... [详细]
  • filter

    前端实用的CSS3技巧有哪些

    前端实用的CSS3技巧有哪些
    本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]
  • filter

    CSS3你可能不知道的冷知识

    可能我们在看一些网页的源码时会发现自己从来没见过的属性或用法今天我就来总结一下CSS3的冷知识样式计算在CSS中也可以进行简单的计算通过calc函数可以实现这样还可以使我们的 ... [详细]
  • string

    深入解析Java多线程同步机制与应用

    本文深入探讨了Java多线程环境下的同步机制及其应用，重点介绍了`synchronized`关键字的使用方法和原理。`synchronized`关键字主要用于确保多个线程在访问共享资源时的互斥性和原子性。通过具体示例，如在一个类中使用`synchronized`修饰方法，展示了如何实现线程安全的代码块。此外，文章还讨论了`ReentrantLock`等其他同步工具的优缺点，并提供了实际应用场景中的最佳实践。 ... [详细]
  • js

    微信小程序实现类似微博的无限回复功能，内置云开发数据库支持

    微信小程序实现类似微博的无限回复功能，内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能，并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段，还包含了完整的页面代码，方便开发者按需使用。此外，HTML页面中包含了一些示例图片，开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计，帮助读者更好地理解和实现这一功能。 ... [详细]
  • string

    如何使用 net.sf.extjwnl.data.Word 类及其代码示例详解

    如何使用 net.sf.extjwnl.data.Word 类及其代码示例详解 ... [详细]
  • import

    利用Requests库深入解析POST请求的发送方法与实践技巧

    在前一篇文章中，我们介绍了如何使用Requests库发送GET请求。本文将深入探讨如何通过Requests库发送POST请求，包括参数格式、请求封装等关键技巧，并通过“历史上的今天”API实例进行详细说明。 ... [详细]
  • import

    提升表格视觉效果：原生Table的CSS美化实例与技巧分享

    本文分享了如何通过CSS提升原生表格的视觉效果，提供了多个实用的样式示例，帮助开发者打造美观、易读的表格布局。内容涵盖了边框、背景色、文字对齐等多方面的美化技巧，适合前端开发人员参考和应用。 ... [详细]
  • filter

    怎么用css3实现图片的高斯模糊效果

    怎么用css3实现图片的高斯模糊效果
    小编给大家分享一下怎么用css3实现图片的高斯模糊效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后 ... [详细]
  • filter

    CSS3背景颜色渐变效果

    1.CSS3透明度渐变（从左到右）#grad{background:-webkit-linear-gradient(left,rgba(198,226,255,1),rgba(19 ... [详细]
  • filter

    css3基础学习笔记

    1、给边框加上圆角及阴影，如下代码：<!DOCTYPEhtmlPUBLIC"-W3CDTDHTML4.01TransitionalEN"" ... [详细]
author-avatar
燕阳阳消_469
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有