专栏首页练小习的专栏css绘图,实现一些特殊形状

css绘图,实现一些特殊形状

还是和前面的tips一样,多用after和before,能省俩标签!俩!比如这一堆的形状

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="keywords" content="前端开发,CSS,HTML,XHTML,JS" />
	<meta name="description" content="专注前端技术博客" />
	<title>WEB前端开发 | 闪亮于WEB前端的彩虹</title>
<title>测试</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
	border: 0;
}
.wrap{
	position: absolute;
}
.arrow { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid #000; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg);
}
 .arrow:after {
  content: ""; position: absolute; border: 0 solid transparent; border-top: 3px solid #000; border-radius: 20px 0 0 0; top: -12px; left: -9px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
}
.star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #99CC33; position: relative; }
.star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #99CC33; position: absolute; content: ""; top: 30px; left: -50px; }
.star-five { margin: 50px 0; position: relative; display: block; color: #0066CC; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #0066CC; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); }
.star-five:before { border-bottom: 80px solid #0066CC; 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); }
.star-five:after { position: absolute; display: block; color: #0066CC; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #0066CC; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; }
.heart { position: relative; width: 100px; height: 90px; }
.heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; }
.heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }
.infinity { position: relative; width: 212px; height: 100px; }
.infinity:before, .infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid #FF33CC; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.pacman { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid #FFCC00; border-left: 60px solid #FFCC00; border-bottom: 60px solid #FFCC00; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px;
}
.yin-yang { width: 96px; height: 48px; background: #fff; border-color: #000; 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: #fff; border: 18px solid #000; border-radius: 100%; width: 12px; height: 12px; }
 .yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: #000; border: 18px solid #fff; border-radius:100%; width: 12px; height: 12px; }
</style>
</head>
<body>
<div class="wrap" style="top:30px; left:40px;">
	<div class="arrow"></div>
</div>
<div class="wrap" style="top:20px; left:100px;">
	<div class="star-six"></div>
</div>
<div class="wrap" style="top:20px; left:200px;">
	<div class="star-five"></div>
</div>
<div class="wrap" style="top:20px; left:400px;">
	<div class="heart"></div>
</div>
<div class="wrap" style="top:220px; left:100px;">
	<div class="infinity"></div>
</div>
<div class="wrap" style="top:220px; left:400px;">
	<div class="pacman"></div>
</div>
<div class="wrap" style="top:340px; left:200px;">
	<div class="yin-yang"></div>
</div>
</body>
</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 研讨浏览器绘制和Web性能的注意事项

    Web浏览器将HTML、CSS和JavaScript转换成已完成的过程视觉化表示是相当复杂的,涉及到很好的"魔术"。下面是一组简化的浏览器步骤:

    张炳
  • 浏览器解析 CSS 样式的过程

    一旦 CSS 被浏览器下载,CSS 解析器就会被打开来处理它遇到的任何CSS。这可以是单个文档内的CSS、<style>标记内的CSS,也可以是 DOM 元素的...

    前端小智@大迁世界
  • 一起来学matlab-matlab学习笔记8 基本绘图命令_3 特殊图形绘制

    本文为matlab自学笔记的一部分,之所以学习matlab是因为其真的是人工智能无论是神经网络还是智能计算中日常使用的,非常重要的软件。也许最近其带来的一...

    演化计算与人工智能
  • 经典面试题:浏览器是怎样解析CSS的?

    一旦 CSS 被浏览器下载,CSS 解析器就会被打开来处理它遇到的任何 CSS。这可以是单个文档内的 CSS、<style>标记内的 CSS,也可以是 DOM ...

    Fundebug
  • HTML/CSS,说点你可能不知道的技巧

    编写插件需要使用图片资源又不适合直接引入时使用base64图片编码进css或js插件

    用户5997198
  • 纯css实现旋转的金字塔

    css是个神奇的东西,在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一,设计精巧,计算精密,令世人赞叹。那么如何用CSS画一个金字塔呢?

    小丑同学
  • UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制

    本篇作为技术分享系列的第一篇,详细讲一下 SVG 的解析和绘制,这部分功能的研究和最终实现由团队的 @黄超超 同学负责,感谢提供技术文档和支持。  首先我们来看...

    Shao Meng
  • 分享 | 前端性能优化(CSS动画篇)

    最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到了很多,在这里记录一下,其中的知识都是来源于这俩篇文章,我只是截取了其中...

    疯狂的技术宅
  • 用CSS新属性实现特殊的图片显示效果

    使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示...

    毛瑞
  • CSS3着重符及其fallback

    在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

    mmzhou
  • 代码变油画,精细到毛发,这个前端小姐姐只用HTML+CSS,让美术设计也惊叹丨GitHub热榜

    大佬级前端,用HTML+CSS绘画,全程不用PS、AI这种图形化的图片编辑器,单纯敲一行行代码纯手工绘制。

    量子位
  • 浏览器原理0. 前言1. 解析过程2. 渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局(重要)4. 重绘与重排(重要)5. paint(绘制)6. composite(重要)7. 浏览器加载

    身为前端,打交道最多的就是浏览器和node了,也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程,......,我们直接来到收到...

    lhyt
  • 卡牌特效: svg不规则倒计时动效

    ? 导语:直播过程中,往往会有各种动画特效增强直播效果,近期需求中,设计要求在企鹅电竞PC官网上实现一种卡牌效果,在不规则图片上叠加倒计时效果。前端项目中,...

    腾讯技术工程官方号
  • 【面试技巧】老生常谈之 n 种使用 CSS 实现三角形的技巧

    在一些面经中,经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形,而常见的回答通常也只有使用 border 进行绘制一种方法。

    Sb_Coco
  • 奇妙的 CSS shapes(CSS图形)

    Sb_Coco
  • 几个小处理提高前端性能

    javascript.shop
  • 浏览器合成与渲染层优化

    Web 页面性能是前端开发特别需要关注的重点,评判前端 Web 页面性能的指标有很多,页面的流畅度是其中的一种,如何让页面变得 “柔顺丝滑”,要讨论起来可就是个...

    WecTeam
  • 不再切图!CSS实现渐变提示框(tooltips)

    今天来看一种十分常见的交互:提示框(tooltips)。通常提示框都是纯色的,比如下面这个

    秋风的笔记
  • WecTeam:从手机滚动丢帧问题,学习浏览器合成与渲染层优化

    Web 页面性能是前端开发特别需要关注的重点,评判前端 Web 页面性能的指标有很多,页面的流畅度是其中的一种,如何让页面变得 “柔顺丝滑”,要讨论起来可就是个...

    前端劝退师

扫码关注云+社区

领取腾讯云代金券