css绘制三角形和对号

CSS绘制三角形

div

<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
<div class="triangle4"></div>
<div class="triangle5"></div>
<div class="triangle6"></div>
<div class="triangle7"></div>
<div class="triangle8"></div>

css

.triangle1 {
    width: 0;
    height: 0;
    border: 35px solid transparent;
    border-left-color: pink;
}
.triangle2 {
    width: 0;
    height: 0;
    border: 35px solid transparent;
    border-bottom-color: pink;
}
.triangle3 {
    width: 0;
    height: 0;
    border: 35px solid transparent;
    border-top-color: pink;
}
.triangle4 {
    width: 0;
    height: 0;
    border: 35px solid transparent;
    border-right-color: pink;
}
.triangle5 {
    width: 0;
    height: 0;
    border-top: 50px solid pink;
    border-right: 50px solid transparent;
}
.triangle6 {
    width: 0;
    height: 0;
    border-top: 50px solid pink;
    border-left: 50px solid transparent;
}
.triangle7 {
    width: 0;
    height: 0;
    border-bottom: 50px solid pink;
    border-right: 50px solid transparent;
}
.triangle8 {
    width: 0;
    height: 0;
    border-bottom: 50px solid pink;
    border-left: 50px solid transparent;
}

效果

image.png

CSS绘制对号

div

<div class="bingo"></div>

css

width: 50px;
height: 25px;
border: 2px solid pink;
border-radius: 1px;
border-top-width: 0px;
border-right-width: 0px;
background-color: rgba(0,0,0,0);
transform: rotate(-45deg);

效果

image.png

推荐阅读更多精彩内容

  • 题外话:在网上搜索"css绘制三角形"的结果都是基本上直接上代码和效果图,或者从矩形效果到三角形,都没有说到原理!...
    啊啊啊阿南阅读 183评论 0 0
  • 在做UI(页面重构)的时候,免不了和各种小图标打交道,这其中最多的应该是三角形以及箭头,一般情况下可以通过伪类使用...
    码农氵阅读 310评论 0 0
  • 通常情况下,用 CSS 来实现一些简单的图形会比使用图片更有优势,譬如: CSS 可以随时调整图形的颜色; CSS...
    西山以南阅读 1,202评论 6 6
  • 1 . 实现一个简单的三角形 使用css 盒模型中的border (边框) 即可实现如下的三角形: 实现原理: 首...
    Fanny阅读 134评论 0 0
  • 1. 用css绘制三角形有什么用? 通常情况,项目中的一些气泡提示词模块或是带有指向箭头的模块一般都会有一个三角形...
    FTD止水阅读 113评论 0 0