css怎么写一个直角三角形


本文摘自PHP中文网,作者藏色散人,侵删。

css写一个直角三角形的方法:首先创建一个HTML示例文件;然后去除底边宽度,实现等腰直角三角形;最后加宽上边宽度,实现想要的直角三角形即可。

本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

利用css写直角三角形

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<style>

/*原理:第一步*/

.box1{

    width: 0;

    height: 0;

    border-top: 50px solid green;

    border-right: 50px solid red;

    border-bottom: 0px solid yellow; /*1.底边去除就变成直角三角形*/

    border-left: 50px solid blue;

}

 

/*原理:第二步*/

.box2{

    width: 0;

    height: 0;

    border-top: 100px solid green; /*2.上边拉长就会变成直接三角形*/

    border-right: 50px solid red;

    border-bottom: 0px solid yellow; /*1.底边去除就变成直角三角形*/

    border-left: 50px solid blue;

}

 

/*实现*/

.box{

    width: 0;/*1.设置宽高为0*/

    height: 0;

    /*2.除右边都变透明色,实边*/

    border-color: transparent red transparent transparent;

    border-style: solid;

    border-width: 100px 50px 0 0; /*3.上边宽100,右边宽50,下左边宽0*/

 

}

</style>

原理第一步,去除底边宽度,实现等腰直角三角形:

<p class="box1"></p>

原理第二步,加宽上边宽度,实现想要直角三角形:

<p class="box2"></p>

实现,把上边,左边边变透明色:

<p class="box"></p>

【推荐:《css视频教程》】

效果:

原理第一步,去除底边宽度,实现等腰直角三角形:


阅读剩余部分

相关阅读 >>

css怎么设置div的透明度

css选择器first-child与first-of-type之间有什么区别?

css如何改变图片的颜色

css有什么作用

css如何设置元素水平垂直居中显示

为什么css要初始化

css如何实现图片轮播

服务器加载不了css怎么办

css怎么改变边框颜色

css3中渐变属性有哪些

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...