黑马程序员技术交流社区

标题: 【广州PHP】使用css的border属性实现三角形 [打印本页]

作者: gz_xudada    时间: 2018-3-16 17:38
标题: 【广州PHP】使用css的border属性实现三角形
本帖最后由 gz_xudada 于 2018-3-16 17:40 编辑

使用cssborder属性实现三角形

1. border使用方法
2. border 三角形

2.1. 三角形原理,我们来看一个普通的底部边框
2.2. 我们在右边添加一个边框,细心留意两个border的交界就是一个斜线
2.3. 我们在左边边添加一个边框
2.4. 试想一下,我们把左右边框变成了透明的,是怎么样的呢?

已经变成了梯形了啊,我们怎么样把她变成三角形呢?
2.5. 我们把宽度高度设置为0
一个向上三角形已经出现了啊
以上代码有简写方式:
2.6. 除了向上三角形,还有向下,向左,向右三角形





作者: 番茄炒鸡蛋    时间: 2018-3-16 17:43
学习了!
作者: 金色的程序员    时间: 2018-3-16 18:00
受教了

作者: tom19970323    时间: 2018-3-16 18:43
666骚操作

作者: gz_phper    时间: 2018-3-16 19:29
空心三角形咋做呢?
作者: gz_xudada    时间: 2018-4-6 15:18
gz_phper 发表于 2018-3-16 19:29
空心三角形咋做呢?

空心用css实现比较麻烦,需要用到css3的伪类选择器before和after还要结合transform旋转一定的角度以及定位
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>网页标题</title>
        <meta name="keywords" content="关键字列表" />
        <meta name="description" content="网页描述" />
        <link rel="stylesheet" type="text/css" href="" />
        <style type="text/css">
                div{
                        width:100px;
                        height:2px;
                        border-bottom:2px solid red;
                        margin:100px auto;
                        position:relative;
                }
                div:before{
                        content:'';
                        display:block;
                        width:65px;
                        height:2px;
                        border-bottom:2px solid red;
                        transform:rotate(-45deg);
                        transform-origin:left top;
                }
                div:after{
                        content:'';
                        display:block;
                        width:65px;
                        height:2px;
                        border-bottom:2px solid red;
                        transform: rotate(45deg);
                        transform-origin: right top;
                        position:absolute;
                        right:0;
                }
        </style>
        <script type="text/javascript"></script>
</head>
<body>
        <div></div>
</body>
</html>





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2