1、直接添加三角形

 

　　

 

　　

 

　　<divclass="triangleContainer">

 

　　<divclass="triangleContent">

 

　　<divclass="triangle"></div>

 

　　<divclass="title">想你呦</div>

 

　　</div>

 

　　</div>

 

　　<style>

 

　　body{

 

　　background:#e5e5e5;

 

　　}

 

　　.triangleContainer{

 

　　margin:50pxauto;

 

　　width:500px;

 

　　height:400px;

 

　　background:#fff;

 

　　}

 

　　.triangleContent{

 

　　position:relative;

 

　　}

 

　　.triangle{

 

　　position:absolute;

 

　　right:-70px;

 

　　top:-70px;

 

　　transform:rotate(45deg);

 

　　/*比较长的写法*/

 

　　/*border-top:70pxsolidtransparent;*/

 

　　/*border-bottom:70pxsolidred;*/

 

　　/*border-left:70pxsolidtransparent;*/

 

　　/*border-right:70pxsolidtransparent;*/

 

　　/*简单写法*/

 

　　border:70pxsolidtransparent;

 

　　border-bottom-color:red;

 

　　}

 

　　.title{

 

　　position:absolute;

 

　　right:8px;

 

　　top:17px;

 

　　transform:rotate(45deg);

 

　　font-size:19px;

 

　　color:#fff;

 

　　}

 

　　</style>








本文转载自中文网