CSS3绘制不规则图形（一）

最新推荐文章于 2024-06-18 10:00:00 发布
最新推荐文章于 2024-06-18 10:00:00 发布
阅读量3.6w 收藏 160
点赞数 46
分类专栏： CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suwyer/article/details/81045284
版权

由于近期的项目中出现了不规则的边框和图形， 所以只好提前先温习一下，以前收集的一些CSS3绘制的图形。。。样式绘制的图形比图片的性能要好，体验更佳。

废话不多说，我们直接看效果：

1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角）

    主要用到的是：宽度高度设置为0， border的各个边的设置（各个边的透明或不透明）；


                 .triangle-up {
			/* 三角形 */
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
    		        border-right: 50px solid transparent;
        	        border-bottom: 100px solid #f00;
		}
		.triangle-down {
			/* 倒三角 */
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
    		        border-right: 50px solid transparent;
        	        border-top: 100px solid #f00;
		}
		.triangle-left {
			/* 左三角 */
			width: 0;
			height: 0;
			border-top: 50px solid transparent;
    		        border-bottom: 50px solid transparent;
        	        border-right: 100px solid #f00;
		}
		.triangle-right {
			/* 右三角 */
			width: 0;
			height: 0;
			border-top: 50px solid transparent;
    		        border-bottom: 50px solid transparent;
        	        border-left: 100px solid #f00;
		}
		.triangle-topleft {
			/* 左上三角 */
			width: 0;
			height: 0;
    		        border-right: 100px solid transparent;
        	        border-top: 100px solid #f00;
		}
		.triangle-topright {
			/* 右上三角 */
			width: 0;
			height: 0;
			border-left: 100px solid transparent;
        	        border-top: 100px solid #f00;
		}
		.triangle-downleft {
			/* 左下三角 */
			width: 0;
			height: 0;
    		        border-right: 100px solid transparent;
        	        border-bottom: 100px solid #f00;
		}
		.triangle-downright {
			/* 右下三角 */
			width: 0;
			height: 0;
			border-left: 100px solid transparent;
        	        border-bottom: 100px solid #f00;
		}

2、圆形、椭圆、扇形、圆环、月牙


               .circular{ 
			/* 圆形 */
			width: 100px;
			height: 100px;
			background: #f00;
			border-radius: 50%; 
		}
		.oval {
			/* 椭圆 */
			width: 200px;
			height: 100px;
			background: #f00;
			border-radius: 100px / 50px;
		}
		.sector {
			/* 扇形 */
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
    		        border-right: 50px solid transparent;
        	        border-top: 100px solid #f00;
        	        border-radius: 50%;
		}
		.ring {
			/* 圆环 */
			width: 100px;
			height: 100px;
			border: 5px solid #f00;
			border-radius: 50%;
		}
		.crescent {
			/* 月牙 */
			width: 100px;
			height: 100px;
			border-radius: 50%;
			box-shadow: 20px 20px 0 0 #f00;
		}

3、正方形、长方形、菱形、平行四边形、梯形


                .square { 
			/* 正方形 */
			width: 100px;
			height: 100px;
			background: #f00;
		}
		.rectangle { 
			/* 长方形 */
			width: 200px;
			height: 100px;
			background: #f00;
		}
		.rhomb {
			/* 菱形 */
			width: 100px;
			height: 100px;
			background: #f00;
			transform: rotate(45deg);
		}
		.parallelogram {
			/* 平行四边形 */
			width: 200px;
			height: 100px;
			background: #f00;
			transform: skew(-20deg);
		}
		.trapezoid {
			/* 梯形 */
			width: 100px;
			height: 0;
			border-bottom: 100px solid #f00;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
		}

4、五边形、六边形、八边形


               .pentagon {
			/* 五边形：三角形和梯形的结合 */
		        width: 60px;
		        height: 0;
		        position: relative;
		        border-top: 55px solid #f00;
		        border-left: 25px solid transparent;
		        border-right: 25px solid transparent;
		}
		.pentagon:before {
			content: "";
		        position: absolute;
		        width: 0px;
		        height: 0;
		        border-left: 55px solid transparent;
		        border-right: 55px solid transparent;
		        border-bottom: 35px solid #f00;
		        left: -25px;
		        top: -90px;
		}

		.hexagon {
			/*六边形：在长方形上面和下面各放置一个三角形*/
			width: 100px;
			height: 55px;
			background: #f00;
			position: relative;
		}
		.hexagon:before {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
			top: -25px;
			left: 0;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 25px solid #f00;
		}
		.hexagon:after {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
			bottom: -25px;
			left: 0;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-top: 25px solid #f00;
		}
		
		.octagon {
			/* 八边形：长方形、上下各放置一个梯形 */
			width: 100px;
			height: 100px;
			background: #f00;
			position: relative;
		}
		.octagon:before {
			content: "";
			position: absolute;
			width: 42px;
			height: 0;
			border-left: 29px solid #fff;
			border-right: 29px solid #fff;
			border-bottom: 30px solid #f00;
			top: 0;
			left: 0;
		}
		.octagon:after {
			content: "";
			position: absolute;
			width: 42px;
			height: 0;
			border-left: 29px solid #fff;
			border-right: 29px solid #fff;
			border-top: 30px solid #f00;
			bottom: 0;
			left: 0;
		}

5、爱心


                .love {
			/* 爱心 */
			position: relative;
		}
		.love:before {
			content: "";
			width: 70px;
			height: 110px;
			background: #f00;
			position: absolute;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			transform: rotate(45deg);
		}
		.love:after {
			content: "";
			width: 70px;
			height: 110px;
			background: #f00;
			position: absolute;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			transform: rotate(-45deg);
			left: -30px;
		}

6、无穷大符号


                .infinity {
			/* 无穷大 */
			width: 190px;
			height: 100px;
			position: relative;
		}
		.infinity:before {
			content: "";
			width: 50px;
			height: 50px;
			position: absolute;
			top: 0;
			left: 0;
			border: 20px solid #f00;
			border-radius: 50px 50px 0 50px;
			transform: rotate(-45deg);
		}
		.infinity:after {
			content: "";
			width: 50px;
			height: 50px;
			position: absolute;
			top: 0;
			right: 0;
			border: 20px solid #f00;
			border-radius: 50px 50px 50px 0;
			transform: rotate(45deg);
		}

7、鸡蛋


		.egg {
			/* 鸡蛋 */
			width: 120px;
		        height: 180px;
		        background: #f00;
		        border-radius: 60% 60% 60% 60% / 70% 70% 50% 50%;
		}

8、食人豆


                .pacman {
			/* 食人豆 */
			width: 0;
		        height: 0;
		        border: 60px solid #f00;
		        border-right: 60px solid transparent;
		        border-radius: 100%;
		}

9、对话框


               .alertDialog {
			/* 对话框：一个圆角矩形和一个小三角形 */
			width: 150px;
			height: 100px;
			background: #f00;
			border-radius: 10px;
			position: relative;
		}
		.alertDialog:before {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
		        left: -20px;
		        top: 40px;
			border-top: 10px solid transparent;
		        border-bottom: 10px solid transparent;
		        border-right: 20px solid #f00;	
		}

10、钻石


               .diamond {
			/* 钻石：梯形和三角形组成 */
			width: 50px;
			height: 0;
			position: relative;
			border-bottom: 25px solid #f00;
			border-left: 25px solid transparent;
			border-right: 25px solid transparent;
		}
		.diamond:before {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
		        border-left: 50px solid transparent;
		        border-right: 50px solid transparent;
		        border-top: 70px solid #f00;
		        left: -25px;
		        top: 25px;
		}

11、八卦图


                .eightDiagrams {
			/* 八卦：多个圆形组成 */
			width: 100px;
			height: 50px;
			border-color: #f00;
			border-width: 2px 2px 50px 2px;
			border-style: solid;
			border-radius: 50%;
			position: relative;
		}
		.eightDiagrams:before {
			content: "";
			position: absolute;
			width: 12px;
			height: 12px;
			background: #fff;
			border-radius: 50%;
			top: 50%;
			left: 0;
			border: 19px solid #f00;
		}
		.eightDiagrams:after {
			content: "";
			position: absolute;
			width: 12px;
			height: 12px;
			background: #f00;
			border-radius: 50%;
			top: 50%;
			left: 50%;
			border: 19px solid #fff;
		}

12、五角星


                .starFive {
			/* 五角星： */
			width: 0;
			height: 0;
			position: relative;
			border-left: 80px solid transparent;
			border-right: 80px solid transparent;
			border-bottom: 60px solid #f00;
			transform: rotate(35deg);
		}
		.starFive:before {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border-left: 80px solid transparent;
			border-right: 80px solid transparent;
			border-bottom: 60px solid #f00;
			transform: rotate(-70deg);
			top: 3px;
			left: -80px;
		}
		.starFive:after {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border-bottom: 60px solid #f00;
			border-right: 20px solid transparent;
			border-left: 20px solid transparent;
			transform: rotate(-35deg);
		        top: -40px;
		        left: -49px;
		}

13、六角形、八角星、十二角星


                .starSix {
			/* 六角形：两个三角形组成 */
			width: 0;
			height: 0;
			position: relative;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 100px solid #f00;
		}
		.starSix:before {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
			top: 30px;
			left: -50px;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-top: 100px solid #f00;
		}

		.starEight {
			/* 八角星：两个正方形，旋转角度 */
			width: 100px;
			height: 100px;
			background: #f00;
			position: relative;
		}
		.starEight:before {
			content: "";
			width: 100px;
			height: 100px;
			background: #f00;
			position: absolute;
			top: 0;
			left: 0;
			transform: rotate(45deg);
		}

		.starTwelve {
			/* 十二角星：三个正方形，旋转角度 */
			width: 100px;
			height: 100px;
			background: #f00;
			position: relative;
		}
		.starTwelve:before {
			content: "";
			width: 100px;
			height: 100px;
			background: #f00;
			position: absolute;
			top: 0;
			left: 0;
			transform: rotate(-30deg)
		}
		.starTwelve:after {
			content: "";
			width: 100px;
			height: 100px;
			background: #f00;
			position: absolute;
			top: 0;
			left: 0;
			transform: rotate(30deg)
		}
如果以后遇到css制作的图形，还会继续补充！

源代码地址： 稍后会将源代码地址贴出。。。

suwyer
关注
  • 46
    点赞
  • 踩
  • 160
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
用CSS绘制最常见的40种形状和图形
zqf1314的博客
10-24 1686
用CSS绘制最常见的40种形状和图形 分享： 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。 Square(正方形) #square { width: 100px; height: 100px; background: red;...
html中如何写不规则图形,CSS写三角形、五角形等不规则图形
weixin_35895431的博客
06-02 1596
写页面的时候时长遇到一些奇怪图形，用css是可以实现各种不规则图形的，下面举例几个常用的：一、三角形利用border-color支持transparent这一特性，隐藏三条边框，实现三角形。.triangle {width: 0;height: 0;border-style: solid;box-sizing: border-box;border-width: 0 10px 10px;border...
CSS3绘制不规则图形的一些方法示例
12-04
前言 CSS 创建复杂图形的技术即将会被广泛支持，并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。 现在，我们已经可以使用CSS 3 常见不规则复杂图形了，如下图所示： 使用CSS创建的图形，无法内置文字或实现文字环绕效果。因此，如何实现不规则图形和文字复杂布局也成为了一个热议话题。 今天我们就来介绍一下如何实现这个效果。文章中我们将阐述如何使用 CSS创建不规则图形，实现不规则的文本布局。学会如何创建不规则图形之后，你就可以发挥想象力，创建唯美的CSS页面了，下图既是使用该技术创建的《爱丽丝梦游仙境》效果图： 注：这是CSS的最
前端面试必学基础！用CSS画7大基本图形
最新发布
Web面试那些事儿的博客
06-18 1030
如果你现在正在找工作，可以私信“web”或者直接添加下方小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。
使用CSS 3创建不规则图形
11-13 442
前言 CSS 创建复杂图形的技术即将会被广泛支持，并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。 现在，我们已经可以使用CSS 3 常见不规则复杂图形了（点击链接查看），如下图所示： 使用CSS创建的图形，无法内置文字或实现文字环绕效果。因此，如何实现不规则图形和文字复杂布局也成为了一个热议话题。 今天我们就来...
css绘制不规则图形
Bumphy的博客
12-16 5391
CSS绘制不规则图形
CSS 不规则图形绘制
weixin_30924239的博客
05-06 522
基础技能1 - 神奇的border 我们先来画一个长方形： .Rectangle { height: 100px; width: 200px; background: darkgray; border-width: 50px; border-style: solid; border-top-color: cyan; ...
纯CSS3绘制各种不规则图形图标样式特效源码.zip
11-20
本资源"纯CSS3绘制各种不规则图形图标样式特效源码.zip"正是利用了CSS3的这些新特性，提供了一套不依赖于图片或JavaScript的图形绘制方案。 一、CSS3的边框与背景 在CSS3中，边框和背景的处理方式大大增强。例如，...
css 不规则边角_CSS3绘制不规则图形（一）
weixin_39911066的博客
12-22 677
由于近期的项目中出现了不规则的边框和图形， 所以只好提前先温习一下，以前收集的一些CSS3绘制的图形。。。样式绘制的图形比图片的性能要好，体验更佳。废话不多说，我们直接看效果：1、三角形系列(三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角)主要用到的是：宽度高度设置为0， border的各个边的设置(各个边的透明或不透明)；.triangle-up {/* 三角形 */wi...
CSS3绘制不规则图形
a378113472的博客
04-08 2117
由于近期的项目中出现了不规则的边框和图形， 所以只好提前先温习一下，以前收集的一些CSS3绘制的图形。。。样式绘制的图形比图片的性能要好，体验更佳。 废话不多说，我们直接看效果： 1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角） 主要用到的是：宽度高度设置为0， border的各个边的设置（各个边的透明或不透明）； .t...
css不规则图形实现原理及代码
09-25
googlepaly网站tabs选项卡样式是css实现的斜边，接下来简单介绍一下自己理解的其中的原理，感兴趣的朋友可以参考下，希望可以帮助到你
画不规则图形并填充不规则图形
10-20
画不规则(闭合)图形、填充不规则图形、右键填充 填充方式有：种子填充、扫描填充、系统填充 默认为种子填充
css实现不规则图形
qq_42383974的博客
12-13 851
2.加边框，切角部分边框也会被切掉。1.无边框，四切角，纯色背景。
css3使用clip-path裁剪元素
帆酱的博客
12-01 1189
简介 clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。 基本语法 clip-source|basic-shape|geometry-box|none 一、 ...
css 不规则边角_CSS实现各种形状
weixin_39595310的博客
12-22 1270
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。圆形要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID。圆形在设置CSS时要设置宽度和高度相...
纯css实现多种不规则图形,并生成代码
Choicc的博客
03-17 615
网站链接: https://bennettfeely.com/clippy/ 如图: 使用方式: ①网页右侧选择所需图形 ②对图形进行随意拉伸,直至满意 ③复制网页下方css代码
CSS不规则卡片-纯CSS制作优惠券样式-CSS实现锯齿样式
JackieDYH的博客
01-04 1355
布局 布局 其实是学习前端的重要部分，最常用的方式就是从上而下、从左而右、亦或者两个相结合。 看上图，而这里，我们就只是最简单的布局方式，从上而下： 1、优惠券金额和过期时间 2、优惠券描述 3、按钮（其实按钮也可以放到“2”里面去） 这样分析，我们就有了 html 架构了 <div class="coupon"> <!-- 1、优惠券金额和过期时间 --> <div class="price"> 100元 <span..
css+图标偏移,CSS绘制不规则图标
weixin_42382944的博客
08-04 411
最终效果图：image.png1、方法一：margin定位CSS/* 长方形 */.a1{background-color: rgb(91,155,236);width: 150px;height: 36px;text-align: center;}/* 左下角直角三角形 */.a2{width: 0;height: 0;margin-top: -6px;border-top: 24px soli...
css3 写一个不规则运动的音频动画
05-30
好的，我可以给你提供一个基于CSS3的音频动画示例，实现不规则运动的效果。 首先，我们需要定义一个 `audio` 元素来播放音频，然后将其隐藏： ```html <audio id="audio" src="your-audio-file.mp3" preload="auto"></audio> ``` 接着，我们需要定义一个 `div` 元素来承载音频动画，并设置一些基本样式： ```html <div id="audio-visualizer"></div> ``` ```css #audio-visualizer { position: relative; width: 100%; height: 200px; background: #333; } ``` 然后，我们可以使用 `::before` 伪元素和 `animation` 属性来创建动画效果。我们可以使用 `transform` 属性来实现不规则运动。同时，我们需要结合音频的频谱数据来控制动画的速度和幅度。以下是完整的 CSS 代码： ```css #audio-visualizer::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); animation: visualizer 200ms linear infinite; } @keyframes visualizer { 0% { transform: scaleY(1); } 50% { transform: scaleY(2); } 100% { transform: scaleY(1); } } /* 控制动画速度和幅度 */ #audio-visualizer::before { animation-duration: 200ms; animation-timing-function: linear; } #audio-visualizer[data-audio-playing="true"]::before { animation-play-state: running; } #audio-visualizer[data-audio-playing="false"]::before { animation-play-state: paused; } #audio-visualizer[data-audio-peak="true"]::before { animation-duration: 100ms; animation-timing-function: ease-out; transform: scaleY(3); } ``` 最后，在 JavaScript 中，我们需要监听音频的播放事件，并根据频谱数据来控制动画的速度和幅度。以下是示例代码： ```js const audio = document.getElementById('audio'); const visualizer = document.getElementById('audio-visualizer'); const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const source = audioContext.createMediaElementSource(audio); const analyser = audioContext.createAnalyser(); analyser.fftSize = 2048; const bufferLength = analyser.frequencyBinCount; const dataArray = new Uint8Array(bufferLength); source.connect(analyser); analyser.connect(audioContext.destination); const updateVisualizer = () => { analyser.getByteFrequencyData(dataArray); const average = dataArray.reduce((acc, val) => acc + val, 0) / bufferLength; const peak = Math.max(...dataArray) > 230; visualizer.dataset.audioPeak = peak; visualizer.dataset.audioPlaying = !audio.paused; requestAnimationFrame(updateVisualizer); }; updateVisualizer(); ``` 这样，我们就完成了一个基于CSS3的不规则运动的音频动画效果。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值