CSS画图

一、画三角形

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

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

<!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 三角形

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 博客园样式管理总结(个人博客园装修指南)

    参考博客:https://www.cnblogs.com/maxiaodoubao/p/9854705.html

    CherishTheYouth
  • Windows下如何查看某个端口被占用,以及如何杀死某个进程

    CherishTheYouth
  • ES6学习笔记(一)

    ES6的标准发布很久了,ES7和ES8已经出来了,直到现在才开始学习,已经有点晚了,希望可以赶得上吧。

    CherishTheYouth
  • less学习笔记(一)

    less的写法如下 .content { ul{ list-style: none; ...

    HUC思梦
  • [HTML] websocket的模拟日志监控界面

    模拟命令行的界面效果,使用swoole作为websocket的服务,重新做了下html的界面效果

    陶士涵
  • SASS 和 LESS 的区别

    LESS 需要引入 less.js 来处理代码输出 CSS 到浏览器,也可以在开发环节使用 LESS,然后编译成 CSS 文件直接使用

    Leophen
  • dom啦13 移入移出事件

    用户7873631
  • less快速入门

    我们都知道写 CSS 代码是有些枯燥无味的,尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的...

    十月梦想
  • OO:UML类图、六大关系

    WEBJ2EE
  • 总结Java类关系

    关系是指事物之间存在单向或双向的作用或者影响的状态。其中类与类之间要么有关系要么没关系,感觉这句话有点说的很无耻,谁都知道,但是其中奥妙在于很难确定类与类之间是...

    田维常

扫码关注云+社区

领取腾讯云代金券