css实现倒三角的最简单方法

前端切图仔Zz

已于 2023-05-23 17:55:15 修改

阅读量1.6w

点赞数 5

分类专栏： css和html 文章标签： css html html5

于 2021-09-07 20:21:45 首次发布

本文链接：https://blog.csdn.net/Amouzy/article/details/120165874

版权

css和html 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

css实现倒三角的最简单方法

1. css边框：

html

 <div class="h"></div>

css:

.h{
    width: 0px;
    height: 0px;
    border: 50px solid transparent;
    border-top-color: red;
}

最终呈现结果：

在这里插入图片描述

如果想要其它方向的三角，很简单，直接改成border-left-color，border-right-color或者border-bottom-color即可。如果想要其它形状的倒三角，可以随意调整以下任意边框的高度：

.h{
    width: 0;
    height: 0;
    border-left: 34px solid transparent;
    border-right: 40px solid transparent;
    border-top: 80px solid red;
}

2.旋转正方形

html:

<div class="r">
    <div class="rr"></div>
</div>

css:

.r{
    height: 14px;
    overflow: hidden;
}
.rr{
    position: relative;
    height: 20px;
    width: 12px;
    top: -12px;
    left: 7px;
    background: #0c0c0c;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

最终呈现结果

在这里插入图片描述

其实它的主要原理是父元素将子元素不需要的部分超出隐藏，剩下倒三角形的形状。

前端切图仔Zz

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
css实现倒三角的最简单方法

css实现倒三角的最简单方法1. css边框：html <div class="h"></div>css:.h{ width: 0px; height: 0px; border: 50px solid transparent; border-top-color: red;}最终呈现结果：如果想要其它方向的三角，很简单，直接改成border-left-color，border-right-color或者border-bottom-c
复制链接

扫一扫