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

前端切图仔Zz

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

阅读量1.8w

点赞数 6

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

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

本文链接：https://blog.youkuaiyun.com/Amouzy/article/details/120165874

版权

css和html 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了使用CSS实现倒三角的基本方法，通过边框属性轻松创建不同方向的三角形，并展示了如何通过父元素隐藏多余部分来实现旋转效果。同时，探讨了利用CSS创建其他形状和进行元素旋转的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
}