前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS画图

CSS画图

作者头像
CherishTheYouth
发布2020-07-22 17:23:33
8640
发布2020-07-22 17:23:33
举报
文章被收录于专栏:Vue技术实践Vue技术实践

一、画三角形

参考资料:https://www.cnblogs.com/wangjiachen666/p/9462837.html

思路:div的宽高设为0,线宽设为一个较大的数,边框颜色分开设置,把不需要的块背景色设为透明,就可以了。

代码语言:javascript
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>三角型</title>
    <style type="text/css">
    div {
        width: 0px;
        height: 0px;
        border:150px solid #000;
        border-top-color:red;
        border-bottom-color:transparent;
        border-left-color:blue;
        border-right-color:transparent;       
    }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

结果:

图1.1 三角形

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-07-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、画三角形
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档