请问，怎么设置about区的小三角
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;
padding:0;
font-size: "Microsoft YaHei UI";
text-decoration: none;
list-style: none;}
a{color:white;}
/*顶部*/
.top{
width: 100%;
height:100px;
background:#07cbc9;
line-height: 100px;
position: fixed;
overflow: hidden;
zoom:1;
color:white;
z-index: 99;
}
.cb{float: left;
padding-left: 30px;}
.nav{float: right;
padding-right: 50px; }
.nav ul li{float: left;
padding: 0 15px;}
.nav ul li:hover{
background: black;
}
/*banner区*/
.banner{width: 100%;
height: 800px;
color:white;
position: relative;
top: 100px;
overflow: hidden;
zoom:1;}
.banner img{width: 100%;
height: 800px;
}
.layer{width: 100%;
height: 800px;
background: black;
opacity: 0.5;
position: absolute;
top:0;
}
.layer-top{width: 600px;
height: 400px;
position: absolute;
top:300px;
right: 50%;
margin-right: -300px;
border: none;
text-align: center;
}
input{
width: 500px;
height: 30px;
border: none;
margin-top:20px;
padding-left: 10px;
background-color: transparent;
border: 2px solid gray;
}
textarea{width:500px;
height: 100px;
border: none;
margin-top: 20px;
padding-left: 10px;
background-color: transparent;
border: 2px solid gray;
}
.ban-btn{width: 120px;
height: 50px;
margin-top: 20px;
background-color: transparent;
border: 2px solid gray;
color: gray;
}
textarea:hover{border: 1px solid #07cbc9}
input:hover{border: 1px solid #07cbc9}
.ban-btn:hover{background: #07cbc9;
border: none;}
/*about区*/
.about{width: 100%;
margin-top: 100px;
overflow: hidden;
zoom:1;}
/*about-top*/
.about-top{text-align: center;}
h2{font-size: 50px;margin: 50px 0 15px 0;}
hr{width: 50px;margin: 0 auto;border: 1px solid #07cbc9;margin-bottom: 15px;}
.lorem{font-size: 15px;
color:gray;}
/*about-middle*/
.about-middle{
width: 1200px;
margin:0 auto;
margin-top: 30px;
overflow: hidden;
zoom:1;
position: relative;
}
.abt-mid-one,
.abt-mid-two,
.abt-mid-three{float: left;}
.abt-mid-one{width: 250px;
height: 350px;}
.abt-mid-two{width: 500px;
height: 350px;}
.abt-mid-three{width: 300px;
height: 350px;
margin-left:150px;
}
.aw{font-size: 30px;
font-weight: bold;
}
.mid-three-sq{
width: 250px;
height: 130px;
text-align: center;
border: 1px solid #07cbc9;
margin-left: 20px;
margin-bottom: 20px;
}
.psq{
font-size: 35px;
padding: 20px 0;
}
.nsq{font-size: 20px;}
.abt-layer{width: 350px;
height: 250px;
border: 1px solid gray;
float: left;
position: absolute;
top: 90px;
}
.p-layer{padding: 30px 0px 0px 30px;
line-height: 25px;}
.abt-btn{
width: 120px;
height: 50px;
margin-top: 20px;
border: none;
background: black;
color: white;
font-size: 20px;
margin-left:30px; }
.abt-btn:hover{
background: white;
color: black;
border: 1px solid black;
}
/*about-bottom*/
.about-bottom{width: 100%;
margin-top: 100px;
overflow: hidden;
zoom:1;}
.abt-bto-one{width: 100%;}
.about-bottom img{width: 25%;
height: 450px;
float:left;
margin: 0;
}
.abt-bto-p{width:25%;
height: 450px;
background:#07cbc9;
float: left;
margin:0;
position: relative;}
h3{color: white;
font-size: 30px;
margin: 30px 30px;}
h6{color: white;
font-size: 20px;
margin: 30px 30px;}
.abt-bto-p p{color: gray;
margin: 30px 30px;}
.about-bottom button{
width: 120px;
height: 50px;
margin-top: 20px;
border: none;
background: black;
color: white;
font-size: 10px;
position: absolute;
top: 350px;
left:200px;
margin-left: -30px;
}
.about-bottom button:hover{
background: white;
color: black;
border: 1px solid black;
}
/*gallery*/
.gallery{width: 1200px;
margin: 0 auto;}
/*gallery*/
.gallery-top{text-align: center;}
h2{font-size: 50px;margin: 50px 0 15px 0;}
hr{width: 50px;margin: 0 auto;border: 1px solid #07cbc9;margin-bottom: 15px;}
/*gallery-bottom*/
.gallery-bottom{width:1200px;
overflow: hidden;
zoom:1;
margin:80px auto 50px auto;
}
.gal-bot-one{width: 100%;
}
.gal-bot-one-last{float: left;}
.gallery-bottom img{width: 360px;
margin-left: 30px;}
.gallery-bottom p{background: black;
color: white;
width: 340px;
height: 50px;
margin-top: -4px;
margin-left: 30px;
margin-bottom: 30px;
line-height: 50px;
padding-left: 20px;
}
/*footer区*/
.footer{width: 100%;
height: 100px;
background:#07cbc9;
text-align: center;
line-height: 100px;
color: white; }
</style>
</head>
<body>
<!--顶部-->
<div class="top">
<div class="cb">Career Builder</div>
<div class="nav">
<ul>
<li><a href="#">HOMEN</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="banner">
<img src="images/banner3.jpg">
<div class="layer"></div>
<div class="layer-top">
<input type="text" name="paw" placeholder="your Name">
<input type="text" name="paw" placeholder="your Phone">
<input type="text" name="paw" placeholder="your Email">
<textarea placeholder="Write Your Commnet Here"></textarea>
<button class="ban-btn">SEND MESSAGE</button>
</div>
</div>
<!--about区-->
<div class="about">
<!--about-top区-->
<div class="about-top">
<h2>ABOUT</h2>
<hr/>
<p class="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting<br/>
industry.Lorem Ipsum has been the industry's standard dummy<br/>
text ever since the 1500s.</p>
</div>
<!--about-middle区-->
<div class="about-middle">
<div class="abt-mid-one">
<p class="aw">A WORD<br/>
ABOUT US
</p>
</div>
<div class="abt-mid-two">
<img src="images/bb3.jpg">
</div>
<div class="abt-mid-three">
<div class="mid-three-sq">
<p class="psq">70000</p>
<hr>
<p class="nsq">Students</p>
</div>
<div class="mid-three-sq">
<p class="psq">600</p>
<hr>
<p class="nsq">Faculty</p>
</div>
</div>
<div class="abt-layer">
<p class="p-layer">Praesent dignissim viverra est,sed<br>
bibendum ligula congue non.Sed ac nisl<br>
et felis gravida commodo?Suspendisse<br>
eget ullamcorper ipsum.Suspendisse<br>
diam amet.
</p>
<button class="abt-btn">EXPLORE</button>
</div>
</div>
<!--about-bottom-->
<div class="about-bottom">
<div class="abt-bto-one">
<div class="abt-bto-img sj"><img src="images/b1.jpg"></div>
<div class="abt-bto-p">
<h3>Library</h3>
<h6>Lorem Ipsum is simply dummy text of the<br>
printing and typesetting industry
</h6>
<p>Lorem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknow printer took<br>
a galley of type and scrambled it to make a type<br>
specimen book.
</p><button>EXPLORE</button>
</div>
<div class="abt-bto-img sj"><img src="images/b2.jpg"></div>
<div class="abt-bto-p">
<h3>Compurer lab</h3>
<h6>Lorem Ipsum is simply dummy text of the<br>
printing and typesetting industry
</h6>
<p>Lorem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknow printer took<br>
a galley of type and scrambled it to make a type<br>
specimen book.
</p>
<button>EXPLORE</button>
</div>
</div>
<div class="abt-bto-one">
<div class="abt-bto-p">
<h3>Conference Hall</h3>
<h6>Lorem Ipsum is simply dummy text of the<br>
printing and typesetting industry
</h6>
<p>Lorem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknow printer took<br>
a galley of type and scrambled it to make a type<br>
specimen book.
</p>
<button>EXPLORE</button>
</div>
<div class="abt-bto-img sj"><img src="images/b3.jpg"></div>
<div class="abt-bto-p">
<h3>Play Ground</h3>
<h6>Lorem Ipsum is simply dummy text of the<br>
printing and typesetting industry
</h6>
<p>Lorem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknow printer took<br>
a galley of type and scrambled it to make a type<br>
specimen book.
</p>
<button>EXPLORE</button>
</div>
<div class="abt-bto-img sj"><img src="images/b4.jpg"></div>
</div>
</div>
</div>
<!--gallery区-->
<div class="gallery">
<!--gallery-top-->
<div class="gallery-top">
<h2>GALLERY</h2>
<hr/>
<p class="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting<br/>
industry.Lorem Ipsum has been the industry's standard dummy<br/>
text ever since the 1500s.</p>
</div>
<!--gallery-bottom-->
<div class="gallery-bottom">
<div class="gal-bot-one">
<div class="gal-bot-one-last">
<img src="images/03-01.jpg">
<p>SCIENCE LAB</p>
</div>
<div class="gal-bot-one-last">
<img src="images/03-01.jpg">
<p>INDOOR STADIUM</p>
</div>
<div class="gal-bot-one-last">
<img src="images/03-03.jpg">
<p>TRANSPORTATION</p>
</div>
</div>
<div class="gal-bot-one">
<div class="gal-bot-one-last">
<img src="images/03-04.jpg">
<p>KIDS ROOM</p>
</div>
<div class="gal-bot-one-last">
<img src="images/03-05.jpg">
<p>MEDITATION CLASSES</p>
</div>
<div class="gal-bot-one-last">
<img src="images/03-06.jpg">
<p>KIDS PLAY GROUND</p>
</div>
</div>
</div>
</div>
<!--footer区-->
<div class="footer">
<p>©2016 imoooc.com 京ICP备13046642号</p>
</div>
</body>
</html>0
收起
正在回答
1回答
同学你好，老师给你举个例子哦：
这个三角形样式可以使用border边框来实现。
一个块里面有四个方向的三角形，而需要的是最右边的蓝色三角形，只需要给其他三角形的边框颜色设置成透明的颜色（transparent），你可以自己试一下.
代码：
可以试一试哦，把小三角标放到布局中。
如果帮助到了你，欢迎采纳。
祝学习愉快！~
相似问题
作业About区三角的问题
33
0
3
顶部右侧下拉菜单的默认小三角样式怎么用图片代替啊
22
0
6
about区域的定位在不同显示器下差距很大
43
0
3
about区的小三角，宽高为什么要设置为0？
0
0
1
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星