CSS图形绘制总结

SQC 发布于2019-08-30 15:55 / 2300人阅读

摘要：由张鑫旭大佬的几篇文章常见的图形绘制合集，小纯实现打字动画效果，分享三个纯实现个英文字母的案例，发现了，一些特殊用法，由此想到自己做个总结。

由张鑫旭大佬的几篇文章
常见的CSS图形绘制合集，
小tips: 纯CSS实现打字动画效果，
分享三个纯CSS实现26个英文字母的案例，
发现了border，border-radius, box-shadow一些特殊用法，由此想到自己做个总结。

border 只写一条边

.triangle {
  width: 100px;
  border-top: 100px solid red;
}

同理可得其他边。

写border，同时只写一条边 top

.triangle {
    width: 100px;
    border: 100px solid black;
    border-top: 100px solid red;
}

left

.triangle {
    width: 100px;
    border: 100px solid black;
    border-left: 100px solid red;
}

写border，同时写两条边

.triangle {
    width: 100px;
    border: 100px solid black;
    border-top: 100px solid red;
    border-bottom: 100px solid blue;
}

由此基本可以看出四条边的组成情况，在此基础上就可以做出各种变形。比如，文章中提到的向下三角，梯形等

boder-radius 应用一条边 top

.triangle {
    width: 100px;
    border: 100px solid black;
    border-top: 100px solid red;
    border-radius: 200px 0 0 0;
}

.triangle {
    width: 50px;
    height: 50px;
    border-top: 10px solid red;
    border-radius: 200px 0 0 0;
}

镂空

.triangle {
    width: 50px;
    height: 50px;
    
    border: 50px solid black;
    border-radius: 50px 0 0 0;
}

应用两条边

.triangle {
    width: 50px;
    height: 50px;
    border-top: 10px solid red;
    border-left: 10px solid yellow;
    border-radius: 100px;
}

应用四条边 圆环

.triangle {
    width: 50px;
    height: 50px;
    border-top: 10px solid red;
    border-radius: 100px;
}

border-radius完整结构

border-radius: 1-4 length|% / 1-4 length|%;

“/” 前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径:

鹅蛋

.triangle {
    width: 50px;
    height: 50px;
    background: lightpink;
    border-bottom: 10px solid blue;
    border-left: 10px solid yellow;
    border-right: 10px solid black;
    border-top: 10px solid red;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

box-shadow

.triangle {
    width: 50px;
    height: 50px;
    background: lightpink;
    box-shadow: 50px 50px 0 0 purple;
}

私有云专线服务图形绘制 Android绘制图形 html绘制图形代码 html绘制图形排列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117321.html

mxGraph使用经验总结

摘要：边绘制成折线的时候为两种形式，默认是通过贝塞尔曲线绘制成带圆角的折线，另一种是直角折线。在开发中我对边的绘制方式进行了小小的修改，统一改为直接使用三次贝塞尔曲线连接，具体代码如下调用内置函数绘制三次贝塞尔曲线忽略后面绘制折线的代码参考 mxGraph是一个支持多种语言（Java、JavaScript、PHP、.NET）的画图框架，所绘制的图形可以在主流浏览器以及原生应用上使用。mxGr...

k00baa 2019-08-26 13:58 评论0 收藏0
mxGraph使用经验总结

摘要：首先不支持使用，。相关代码如下边的边都是自动绘制的，支持对边的样式修改，比如箭头粗细等。边绘制成折线的时候为两种形式，默认是通过贝塞尔曲线绘制成带圆角的折线，另一种是直角折线。mxGraph是一个支持多种语言（Java、JavaScript、PHP、.NET）的画图框架，所绘制的图形可以在主流浏览器以及原生应用上使用。 mxGraph官方资料全英文，网上有几篇mxGraph的教程，对于入门和...

raledong 2019-05-23 11:56 评论0 收藏0
高程3总结#第15章使用Canvas绘图

摘要：使用绘图基本用法要使用元素，必须先设置其和属性，指定可以绘图的区域大小。，将绘图游标移动到，不画线。，表示文本对齐方式。执行这个变换之后，坐标会变成之前由表示的点。，后绘制的图形完全替代与之重叠的先绘制图形。也实现了，但默认是禁用的。使用Canvas绘图基本用法要使用元素，必须先设置其width和height属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息...

shusen 2019-08-26 12:20 评论0 收藏0
css三角形绘制方法总结

摘要：在做页面重构的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用解决大部分问题。在做UI（页面重构）的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用unicode解决大部分问题。现在我们来总结下几种使用css绘制三角形的方法，dom结构如下：最简单最方便的办法 background 代码忽略...

rickchen 2019-08-29 13:13 评论0 收藏0
浏览器之硬件加速机制

摘要：书接上文浏览器内核之渲染基础硬件加速基础概念硬件加速技术是指使用的硬件能力为帮助渲染网页，在为的作用主要是用来绘制图形并且性能特别好。包含的节点表示的是使用硬件加速的元素或者技术。 showImg(https://segmentfault.com/img/remote/1460000016348971); 微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我会尽力解决你...

mengera88 2019-08-23 11:54 评论0 收藏0