css实现三角形

css三角形实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .up{
            width: 0px;
            height: 10px;
            border-bottom: 10px solid red;
            border-left:10px solid transparent;
            border-right: 10px solid transparent;
            border-top:0;
        }
        .down{
            width: 0px;
            height: 10px;
            border-top: 10px solid red;
            border-left:10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom:0;
        }
        .left{
            height: 0;
            width: 10px;
            border-left:10px solid red;
            border-bottom:10px solid transparent;
            border-top:10px solid transparent;
            border-right:0;
        }
        .right{
            height: 0;
            width: 10px;
            border-right:10px solid red;
            border-bottom:10px solid transparent;
            border-top:10px solid transparent;
            border-left:0;
        }
    </style>
</head>
<body>
    <div class="down"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="up"></div>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天学到的两种方式可以实现三角形,简单写一下 方法一: html代码: 我是三角形 css代码如下:用伪元素实现一...
    石子1110阅读 564评论 0 0
  • html 因为每个图形都有一些共同的样式,所以为每个div设置两个class,一个公共的class,一个各自的cl...
    李永州的FE阅读 311评论 0 0
  • 我们在使用CSS框架的时候,经常会用到下拉框组件,一般该组件里面有个下三角。此外,我们经常用的tooltip,一般...
    康斌阅读 19,597评论 18 61
  • 我们经常在逛网页的时候,会看到一些三角形,比如下面这张图,个人中心后面有个三角形,那么我们如何利用css样式来绘制...
    雅玲哑铃阅读 1,368评论 1 11
  • 最近在逛某个技术网站的时候,感觉文章关键词上的样式好酷炫啊,分页的样式。来张截图: 你在首页的底部也可以看到这样一...
    web前端学习阅读 983评论 0 4