about区域底部文字部分三角形位置如何设置
# 具体遇到的问题
about区域底部文字部分左侧小三角形位置应该如何设置？
我的代码显示不出来
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="hm2.css">
</head>
<body>
<div class="top">
<div class="logo">
<a href="#"><img src="images/logo.png"/></a>
</div>
<div class="nav">
<ul>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="content">
<img src="images/banner3.jpg"/>
</div>
<div class="contentLayer">
<textarea name="name" placeholder="your Name" class="con name" cols="30" rows="10"></textarea><br/>
<textarea name="phone" placeholder="your Phone" class="con phone" cols="30" rows="10"></textarea><br/>
<textarea name="email" placeholder="your Email" class="con email" cols="30" rows="10"></textarea><br/>
<textarea name="comment" placeholder="Write Your Comment Here" class="con comment" cols="30" rows="10"></textarea><br/>
<input type="button" name="submit" value="SEND MESSAGE" class="submit" /><br/>
</div>
</div>
<div class="about">
<div class="top1">
<div class="title1">
<p>AB<span>O</span>UT</p>
</div>
<div class="words">
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s</p>
</div>
</div>
<div class="middle">
<div class="left">
<div class="left1">
<p>A WORD ABOUT US</p>
</div>
<div class="left2">
<p>Praesent dignissim viverra est, sed
bibendum ligula congue non. Sed ac
nisl et felis gravida commodo?
Suspendisse eget ullamcorper ipsum.
Suspendisse diam amet.
</p><br/>
<input type="button" value="EXPLORE" name="" class="explore"/>
</div>
</div>
<div class="middle1">
<img src="images/bb3.jpg" />
</div>
<div class="right">
<div class="right1">
<p class="p1">70000</p>
<div class="underline"></div>
<p class="p2">Students</p>
</div>
<div class="right2">
<p class="p11">600</p>
<div class="underline1"></div>
<p class="p22">Faculty</p>
</div>
</div>
</div>
<div class="clear"></div>
<div class="bottom">
<div class="img">
<img src="images/b1.jpg"/>
</div>
<div class="text">
<div class="bpt">
<div class="arrow"></div>
<p class="bp1">Library</p><br/>
<p class="bp2">Lorem Ipsum is simply dummy text of the printing
and typsetting industry
</p><br/>
<p class="bp3">Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a
gallery of type and scrambled it to make a type specimen book.
</p><br/>
</div>
<input type="button" value="EXPLORE" name="" class="explore1"/>
</div>
<div class="img">
<img src="images/b2.jpg"/>
</div>
<div class="text">
<div class="bpt">
<p class="bp1">Computer Lab</p><br/>
<p class="bp2">Lorem Ipsum is simply dummy text of the printing
and typesetting industry
</p><br/>
<p class="bp3">Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a
gallery of type and scrambled it to make a type specimen book.
</p><br/>
</div>
<input type="button" value="EXPLORE" name="" class="explore1"/>
</div>
<div class="img">
<img src="images/b3.jpg"/>
</div>
<div class="text">
<div class="bpt">
<p class="bp1">Conference Hall</p><br/>
<p class="bp2">Lorem Ipsum is simply dummy text of the printing
and typesetting industry</p><br/>
<p class="bp3">Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a
gallery of type and scrambled it to make a type specimen book.</p><br/>
</div>
<input type="button" value="EXPLORE" name="" class="explore1"/>
</div>
<div class="img">
<img src="images/b4.jpg"/>
</div>
<div class="text">
<div class="bpt">
<p class="bp1">Play Ground</p><br/>
<p class="bp2">Lorem Ipsum is simply dummy text of the printing
and typesetting industry</p><br/>
<p class="bp3">Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a
gallery of type and scrambled it to make a type specimen book.</p><br/>
</div>
<input type="button" value="EXPLORE" name="" class="explore1"/>
</div>
</div>
</div>
<div class="clear"></div>
<div class="gallery">
<div class="gtitle">
<div class="title2">
<p>GAL<span>L</span>ERY</p>
</div>
<div class="words2">
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s</p>
</div>
</div>
<div class="image1">
<div class="image1c">
<div class="g1">
<img src="images/03-01.jpg"/>
<div class="g1c">aaa</div>
</div>
<div class="g1">
<img src="images/03-01.jpg"/>
<p>aaa</p>
</div>
<div class="g1">
<img src="images/03-01.jpg"/>
<div class="g1c">aaa</div>
</div>
</div>
</div>
<div class="image1">
<div class="image1c">
<div class="g1">
<img src="images/03-01.jpg"/>
<div class="g1c">aaa</div>
</div>
<div class="g1">
<img src="images/03-01.jpg"/>
<div class="g1c">aaa</div>
</div>
<div class="g1">
<img src="images/03-01.jpg"/>
<div class="g1c">aaa</div>
</div>
</div>
</div>
</div>
<div class="foot">
</div>
</body>
</html>
css
*{
margin:0;
padding:0;
list-style:none;
font-family:Microsoft YaHe;
}
.about .bottom .text .bpt .arrow{
position:absolute;
top:50%;
left:0;
width:0;
height:0;
border-style:solid;
border-width:20px 20px 20px 20px;
border-color: transparent #07cbc9 transparent transparent;
z-index:999;
}
.top{
position:fixed;
width:100%;
height:80px;
overflow:hidden;
background:#07cbc9;
z-index:9999;
top:0;
}
.top .logo{
float:left;
}
.top .logo a img{
vertical-align: middle;
margin-top:12px;
margin-left:85px;
}
.top .logo a{
text-decoration: none;
}
.top .nav{
float:right;
margin-right:65px;
}
.top .nav ul li{
margin-left:30px;
float:left;
line-height:80px;
}
.top .nav ul li a{
text-decoration: none;
color:white;
}
.top .nav ul li a:hover{
background:#78dddb;
}
.banner{
width:100%;
height:650px;
position:relative;
margin-top:80px;
}
.banner .content{
width:100%;
}
.banner .content img{
width:100%;
height:650px;
}
.banner .contentLayer{
width:509px;
height:460px;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
.banner .contentLayer .con{
resize:none;
border-width: 2px;
border-color:rgb(132, 134, 136);
border-style:solid;
width:505px;
margin-top:23px;
background:transparent;
color:rgb(132, 134, 136);
}
.banner .contentLayer .con.name,
.banner .contentLayer .con.phone,
.banner .contentLayer .con.email{
height:39px;
}
.banner .contentLayer .con.comment{
height:115px;
}
.banner .contentLayer .submit{
border-width: 2px;
border-color:rgb(132, 134, 136);
border-style:solid;
background:none;
margin-left:190px;
margin-top:23px;
width:123px;
height:39px;
color:rgb(207, 204, 204);
}
.banner .contentLayer .con:hover{
border-color:#07cbc9;
}
.banner .contentLayer .submit:hover{
border:none;
background-color: #07cbc9;
}
.about{
width:100%;
height:1000px;
position:relative;
}
.top1{
width:100%;
height:300px;
text-align: center;
}
.top1 .title1{
width:300px;
height:100px;
padding-top:40px;
z-index:999;
margin:0 auto;
}
.top1 .title1 p{
font-size:50px ;
font-weight: 900;
}
.top1 .title1 p span{
padding-bottom: 7px;
border-bottom: 2px solid #07cbc9;
}
.top1 .words{
width:500px;
height:150px;
margin:0 auto;
color:#8d8b8b;
}
.about .middle{
width:800px;
height:400px;
margin:0 auto;
position:relative;
margin-top:-70px;
}
.about .middle .left{
margin-left:-120px;
padding-top:20px;
position:relative;
z-index:999;
}
.about .middle .left1{
text-align: center;
width: 200px;
height:60px;
font-size:35px;
font-weight:400;
line-height:43px;
margin-bottom:30px;
}
.about .middle .left2{
width: 310px;
height:186px;
padding:30px;
border:1px solid #c9c9c9;
background:hsla(0, 0%, 100%, .4)
}
.about .middle .left2 .explore{
width:102px;
height:45px;
background:black;
color:white;
text-align: center;
border:none;
font-size:15px;
}
.about .middle .left2 .explore:hover{
background:transparent;
border:1px solid black;
color:black;
}
.about .middle .middle1 img{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
float:left;
width:568px;
height:380px;
z-index:0;
}
.about .middle .middle1{
float:left;
}
.about .middle .right{
position:absolute;
top:-20px;
left:690px;
width:238px;
float:right;
}
.about .middle .right .right1{
width:198px;
height:104px;
border:1px solid #07cbc9;
margin:35px;
text-align: center;
padding:20px;
}
.about .middle .right .right1 .p1{
font-size:30px;
font-weight:800;
}
.about .middle .right .right1 .underline{
width:40px;
background:#07cbc9;
height:2px;
margin:15px auto;
}
.about .middle .right .right1 .p2{
font-size:20px;
font-weight:500;
}
.about .middle .right .right2{
width:198px;
height:104px;
border:1px solid #07cbc9;
margin:35px;
text-align: center;
padding:20px;
}
.about .middle .right .right2 .p11{
font-size:30px;
font-weight:800;
}
.about .middle .right .right2 .underline1{
width:40px;
background:#07cbc9;
height:2px;
margin:15px auto;
}
.about .middle .right .right2 .p22{
font-size:20px;
font-weight:500;
}
.clear{
clear:both;
}
.about .bottom{
width:100%;
height:580px;
}
.about .bottom .text,
.about .bottom .img{
width:25%;
height:290px;
float:left;
}
.about .bottom .img img{
width:100%;
height:100%;
}
.about .bottom .text{
background:#07cbc9;
margin:0 auto;
}
.about .bottom .text .bpt{
padding:20px;
}
.about .bottom .text .bp1{
color:white;
font-size:18px;
font-weight:400;
}
.about .bottom .text .bp2{
color:rgb(231, 228, 228);
font-size:12px;
font-weight:400;
}
.about .bottom .text .bp3{
color:rgb(204, 201, 201);
font-size:8px;
font-weight:400;
}
.about .bottom .text .explore1{
width:80px;
height:35px;
background:black;
color:white;
text-align: center;
border:none;
font-size:7px;
display: block;
margin:0 auto;
margin-top:-20px;
}
.about .bottom .text .explore1:hover{
background:transparent;
border:1px solid black;
color:black;
}
.gallery .gtitle{
text-align:center;
width:100%;
height:300px;
}
.gallery .gtitle .title2{
width:300px;
height:100px;
padding-top:40px;
z-index:999;
margin:0 auto;
}
.gallery .gtitle .title2 p{
font-size:50px ;
font-weight: 900;
}
.gallery .gtitle .title2 p span{
padding-bottom: 7px;
border-bottom: 2px solid #07cbc9;
}
.gallery .gtitle .words2{
width:500px;
height:150px;
margin:0 auto;
color:#8d8b8b;
}
.gallery .image1{
width:1000px;
height:400px;
margin:0 auto;
}
.gallery .image1 .image1c{
width:800px;
height:200px;
}
.gallery .image1 .image1c g1{
width:200px;
height:150px;
float:left;
}
.gallery .image1 .image1c g1 img{
width:180px;
height:130px;
}
.gallery .image1 .image1c g1 g1c{
width:180px;
height:20px;
background:black;
color:white;
}
正在回答
同学你好， 因为border-width全部为20px时，表示左右边框的宽度都是20px，所以加起来的宽度就是40px了。可以调整下边框颜色，方便更好的查看效果，如下图所示：
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星