作业About区三角的问题
三角还是无法实现定位，希望老师帮忙看看并解释下逻辑，谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Homework</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-family:"Microsoft YaHei UI";
}
/*1.顶部样式*/
.header{
width:100%;
height:80px;
background-color:#07cbc9;
/*固定在头部*/
position:fixed;
top:0;
left:0;
z-index:999;
}
.header img{
width:300px;
height:60px;
padding-left:100px;
padding-top:10px;
}
.header .logo{
float:left;
}
.header .nav{
float:right;
}
.header .nav ul{
padding-right:100px;
}
.header .nav ul li{
list-style:none;
float:left;
/*每个单词长度不一致，占据的宽度也不一致，设置宽度会导致间距不一致*/
/*width:80px;*/
padding:0 20px;
height:80px;
line-height:80px;
font-size:15px;
font-weight:bolder;
color:#ffffff;
}
.header .nav ul li a{
text-decoration:none;
color:#fff;
}
.header .nav ul li a:hover{
background-color:#000;
}
/*2.页脚样式*/
.footer{
width:100%;
height:80px;
line-height:80px;
font-size:15px;
background-color:#07cbc9;
color:#ffffff;
text-align:center;
}
/*3.banner样式*/
.banner{
width:100%;
height:600px;
/*顶部设置固定定位后会脱离文档流*/
margin-top:80px;
}
.banner img{
width:100%;
height:600px;
}
/*4.遮盖层样式*/
.banner .opacity img{
position:absolute;
top:80px;
left:0;
background-color:#000;
width:100%;
height:600px;
opacity:0.3;
}
/*5.form表单样式*/
.banner .formTable{
position:absolute;
/*父级取消宽高设置，让内容自动撑开*/
z-index:2;
top:400px;
margin-top:-150px;
right:50%;
margin-right:-250px;
}
.banner .formTable .yourName{
border:2px solid gray;
width:505px;
height:39px;
background:transparent;
margin-bottom:10px;
}
.banner .formTable .yourPhone{
border:2px solid gray;
width:505px;
height:39px;
background:transparent;
margin-bottom:10px;
}
.banner .formTable .yourEmail{
border:2px solid gray;
width:505px;
height:39px;
background:transparent;
margin-bottom:10px;
}
.banner .formTable .yourComt{
border:2px solid gray;
width:505px;
height:115px;
background:transparent;
margin-bottom:10px;
}
/*5.1表单hover*/
.yourName:hover, .yourPhone:hover, .yourEmail:hover, .yourComt:hover{
border-color:#07cbc9;
}
.formTable .yourSub{
border:2px solid gray;
width:123px;
height:39px;
background:transparent;
color:gray;
margin-left:194px;
}
/*5.2submit hover*/
.yourSub:hover{
border:none;
background-color:#07cbc9;
}
/*6.About区域*/
/*6.1AboutTop*/
.aboutTop{
width:1000px;
margin:0 auto;
text-align:center;
margin-top:30px;
}
.aboutTop .aboutTopTit{
font-size:30px;
font-weight:bolder;
}
.aboutTop .aboutTopLine{
width:30px;
height:2px;
background-color:#07cbc9;
margin:0 auto;
margin-top:10px;
}
.aboutTop .aboutTopPara{
color:gray;
font-size:20px;
font-weight:lighter;
line-height:25px;
margin-top:10px;
margin-bottom:10px;
}
/*6.2AboutMiddle*/
.aboutMid{
width:1000px;
margin:0 auto;
margin-top:20px;
overflow:hidden;
}
.aboutMidLeft,
.aboutMidPic{
float:left;
}
.aboutMidLeft{
width:200px;
}
.aboutMidPic{
width:600px;
}
.aboutMidRight{
float:right;
}
.aboutMid .aboutMidPic img{
width:100%;
}
.aboutMid .aboutMidLeft .aboutMidLeftTit{
font-size:30px;
}
.aboutMid .aboutMidLeft .aboutMidLeftPara{
width:370px;
height:246px;
padding:20px 20px 0 15px;
line-height:30px;
font-size:20px;
font-weight:lighter;
border:1px solid gray;
position:absolute;
z-index:3;
}
.aboutMid .aboutMidLeft .aboutMidLeftParaOpa{
width:370px;
height:246px;
padding:20px 20px 0 15px;
background-color:#fff;
border:1px solid #fff;
opacity:0.5;
position:absolute;
z-index:2;
}
.aboutMid .aboutMidLeft .aboutMidLeftPara button{
width:102px;
height:45px;
margin-top:20px;
background-color:#000000;
color:#fff;
border:none;
}
button:hover{
color:#000 !important;
background-color:transparent !important;
border:1px solid #000 !important;
}
/*6.3AboutRight*/
.aboutMid .aboutMidRight .aboutMidRightRan{
width:170px;
border:1px solid #07cbc9;
margin:0 0 20px 20px;
padding:20px 0 20px 0;
}
.aboutMid .aboutMidRight .aboutMidRightRan .aboutMidRightNum{
font-size:20px;
font-weight:bolder;
text-align:center;
padding-bottom:15px;
}
.aboutMid .aboutMidRight .aboutMidRightRan .aboutMidRightLine{
width:40px;
height:2px;
background-color:#07cbc9;
margin:0 auto;
}
.aboutMid .aboutMidRight .aboutMidRightRan .aboutMidRightLet{
text-align:center;
padding-top:15px;
}
/*7.about图文混排*/
.aboutMix{
width:100%;
margin-top:50px;
overflow:hidden;
}
.aboutMix .aboutMixImg{
float:left;
width:25%;
height:400px;
}
.aboutMix .aboutMixImg img{
width:100%;
height:100%;
display:block;
}
.aboutMix .aboutMixWords{
float:left;
width:25%;
height:400px;
background-color:#07cbc9;
position:relative;
}
.arrow1{
border-right:35px solid #07cbc9;
left:-35px;
top:50%;
margin-top:-17.5px;
}
.arrow2{
border-left:35px solid #07cbc9;
right:-35px;
margin-top:-17.5px;
}
.aboutMix .aboutMixWords .aboutMixWordsTit{
font-size:30px;
font-weight:bolder;
color:#fff;
padding:40px 30px 15px 30px;
}
.aboutMix .aboutMixWords .aboutMixWordsSubT{
font-size:20px;
color:#fff;
padding:0 30px 15px 30px;
}
.aboutMix .aboutMixWords .aboutMixWordsPara{
font-size:15px;
color:gray;
padding:0 30px 30px 30px;
}
.aboutMix .aboutMixWords button{
width:102px;
height:45px;
color:#fff;
background-color:#000000;
margin:0 auto;
border:none;
/*设置为块元素，即可配合margin:0 auto居中*/
display:block;
}
/*9.GALLERY*/
.gallery{
width:1000px;
margin:0 auto;
text-align:center;
margin-top:30px;
}
.gallery .galleryTit{
font-size:30px;
font-weight:bolder;
}
.gallery .galleryLine{
width:30px;
height:2px;
background-color:#07cbc9;
margin:0 auto;
margin-top:10px;
}
.gallery .galleryPara{
color:gray;
font-size:20px;
font-weight:lighter;
line-height:25px;
margin-top:10px;
margin-bottom:10px;
}
.galleryBlock{
width:1200px;
margin:0 auto;
margin-top:30px;
margin-bottom:50px;
overflow:hidden;
}
.galleryBlock .galleryImg{
float:left;
/*给图片父级设置外边距*/
width:370px;
margin:10px 15px;
}
.galleryBlock .galleryImg img{
width:370px;
height:240px;
display:block;
/*不给图片设置padding值*/
/*padding：15px;*/
}
.galleryBlock .galleryImg .des{
background-color:#000000;
color:#fff;
font-size:14px;
width:360px;
padding:25px 0px 25px 10px;
}
</style>
</head>
<body>
<!-- 顶部 -->
<div class="header">
<!-- 顶部-logo -->
<div class="logo">
<a href="#"><img src="images/logo.png"/></a>
</div>
<!-- 顶部-nav -->
<div class="nav">
<ul>
<li><a href="#">HOME</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>
<!-- banner图 -->
<div class="banner">
<img src="images/banner3.jpg"/>
<!-- 遮罩层 -->
<div class="opacity">
<img src="images/opacity.png"/>
</div>
<!-- 遮罩层表单 -->
<form class="formTable">
<!-- yourName -->
<input type="text" class="yourName" placeholder="your Name">
<br/>
<!-- yourPhone -->
<input type="text" class="yourPhone" placeholder="your Phone">
<br/>
<!-- yourEmail -->
<input type="text" class="yourEmail" placeholder="your Email">
<br/>
<!-- comment -->
<textarea class="yourComt" placeholder="Write Your Comment Here"></textarea>
<br/>
<!-- button -->
<input type="submit" class="yourSub" value="SEND MESSAGE">
</form>
</div>
<!-- about区 -->
<!-- aboutTop -->
<div class="aboutTop">
<div class="aboutTopTit">ABOUT</div>
<div class="aboutTopLine"></div>
<div class="aboutTopPara">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.</div>
</div>
<!-- aboutMiddle -->
<div class="aboutMid">
<!-- 左边区域 -->
<div class="aboutMidLeft">
<div class="aboutMidLeftTit"> A WORD<br/>ABOUT US</div>
<div class="aboutMidLeftPara">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.<br/><button>EXPLORE</button></div>
<div class="aboutMidLeftParaOpa"></div>
</div>
<!-- 中间图片 -->
<div class="aboutMidPic">
<img src="images/bb3.jpg"/>
</div>
<!-- 右边区域 -->
<div class="aboutMidRight">
<div class="aboutMidRightRan">
<div class="aboutMidRightNum">70000</div>
<div class="aboutMidRightLine"></div>
<div class="aboutMidRightLet">Students</div>
</div>
<div class="aboutMidRightRan">
<div class="aboutMidRightNum">600</div>
<div class="aboutMidRightLine"></div>
<div class="aboutMidRightLet">Faculty</div>
</div>
</div>
</div>
<!-- about图文混排 -->
<div class="aboutMix">
<div class="aboutMixImg">
<img src="images/b1.jpg"/>
</div>
<div class="aboutMixWords">
<div class="aboutMixWordsTit">Library</div>
<div class="aboutMixWordsSubT">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="aboutMixWordsPara">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<button>EXPLORE</button>
<div class="arrow1"></div>
</div>
<div class="aboutMixImg">
<img src="images/b2.jpg"/>
</div>
<div class="aboutMixWords">
<div class="aboutMixWordsTit">Computer Lab</div>
<div class="aboutMixWordsSubT">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="aboutMixWordsPara">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<button>EXPLORE</button>
<div class="arrow1"></div>
</div>
<div class="aboutMixWords">
<div class="aboutMixWordsTit">Conference Hall</div>
<div class="aboutMixWordsSubT">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="aboutMixWordsPara">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<button>EXPLORE</button>
<div class="arrow2"></div>
</div>
<div class="aboutMixImg">
<img src="images/b3.jpg"/>
</div>
<div class="aboutMixWords">
<div class="aboutMixWordsTit">Play Ground</div>
<div class="aboutMixWordsSubT">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="aboutMixWordsPara">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<button>EXPLORE</button>
<div class="arrow2"></div>
</div>
<div class="aboutMixImg">
<img src="images/b4.jpg"/>
</div>
</div>
<!-- gallery区 -->
<div class="gallery">
<div class="galleryTit">GALLERY</div>
<div class="galleryLine"></div>
<div class="galleryPara">Lorem Ipsum is simply dummy text of the printing and typesetting <br/> industry. Lorem Ipsum has been the industry's standard dummy text <br/> ever since the 1500s.</div>
</div>
<!-- gallery图片区 -->
<div class="galleryBlock">
<div class="galleryImg">
<img src="images/03-01.jpg"/>
<div class="des">SCIENCE LAB</div>
</div>
<div class="galleryImg">
<img src="images/03-02.jpg"/>
<div class="des">INDOOR STADIUM</div>
</div>
<div class="galleryImg">
<img src="images/03-03.jpg"/>
<div class="des">TRANSPORTATION</div>
</div>
<div class="galleryImg">
<img src="images/03-04.jpg"/>
<div class="des">KIDS ROOM</div>
</div>
<div class="galleryImg">
<img src="images/03-05.jpg"/>
<div class="des">MEDITATION CLASSES</div>
</div>
<div class="galleryImg">
<img src="images/03-06.jpg"/>
<div class="des">KIDS PLAY GROUND</div>
</div>
</div>
<!-- 页脚区 -->
<div class="footer">
@ 2016 imooc.com 京ICP备13046642号
</div>
</body>
</html>
正在回答
同学你好，当一个盒子宽高为0，只设置边框的时候，会发现边框是由四个小三角组成。所以给其他角度的三角设置透明度，然后只留一个即可实现一个三角形。
以第一个小三角为例：
效果：
同学可以作业完成之后，上传作业，批复作业的老师们会帮助同学解决问题哒。祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星