忍法丶Css三角形绘画术
in Css+Html with 0 comment

忍法丶Css三角形绘画术

in Css+Html with 0 comment

前言

像我们平常的前端工作中,经常会遇到各种各样的需求,比如有时候需要实现三角形,可能有的童鞋会直接让设计给图实现,但是我们是有追求有逼格的Geeker(码农),最好实现方法还是使用Css,既环保又安全,下面我们学习下怎么用Css完成一些普遍的三角形需求~

文中demo可以在我的github仓库的blog Demo仓库找到。

Border实现三角形的原理

triangle2

triangle3

triangle4

我们再练习下吧

triangle_up

source code:

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #469af5;

triangle_down

source code:

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #469af5;

triangle_left

source code:

width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #469af5;
border-bottom: 50px solid transparent;

triangle_right

source code:

width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #469af5;
border-bottom: 50px solid transparent;
// style
.triangle1 {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 150px;
    border-radius: 20px;
    background-color: #469af5;
    color: #fff;
    text-align: center;
    line-height: 150px;
    font-size: 18px;
    letter-spacing: 0.05em;
}

.triangle1::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    bottom: -30px;
    right: 40px;
    border-width: 30px 30px 0 0;
    border-color: #469af5 transparent transparent transparent;
    border-style: solid;
}

//html
<div class="triangle1">James is a handsome boy.</div>

triangle1

这里我们利用了伪元素来绘画小三角,其实一般运用最多也是利用伪元素来完成一些需求,通过绝对定位来定位位置,border-width来控制形状,是不是很简单,多试试就懂啦~!

如果你真的很忙,不想敲代码想快速ctrl+c和ctrl+v实现,戳这进入生成三角形代码,也是美滋滋的途径哈哈!

总结

今天分享的东西就这么简单,Css其实很强大,很多东西效果都可以实现,不要过于依赖图片去完成需求,往后我们再一起学习其他好玩的东西,一起成长一起进步!溜了溜了~

run

Responses