纯 css 实现斜角 by colinivy

来源：互联网发布：端口编辑：程序博客网时间：2024/04/28 17:17

转载地址：http://bbs.blueidea.com/thread-2797952-1-1.html
正文：

css实现斜角的原理主要是利用了div两相互垂直的border的交界（斜角组合还有更多变化。。。）

<!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"><head>< http-equiv="Content-Type" content="text/html; charset=utf-8" />< name="robots" content="all" />< name="author" content="colinivy" /><link href="http://www.xhblog.com/style/global.css" rel="stylesheet" type="text/css" media="screen" /><title> Colinivy's world</title><style type="text/css"> * {margin:0; padding:0; list-style:none;} body {  font-size:63%; } #wrapper {  margin:20px;   width:200px;   border: 1px solid #ccc;   font-size:1.2em; } #corner {  position:relative;   top:-1px;  left:-1px;  width:0px;   height:0px;   overflow:hidden;   border-top:15px solid #fff;   border-right:15px solid #ccc;  } #wrapper p {  padding:5px;   text-indent:20px; } #joy_left {  width:20px;   height:0px;   overflow:hidden;   border-top:20px solid green;  border-left:20px solid #FFF;  } #joy_top {  top:-20px;  width:0px;    height:20px;   border-top:20px solid #FFF;  border-right:20px solid red;  } #joy_bottom {  left:-40px;  top:20px;  width:0px;   height:20px;   border-left:20px solid blue;  border-bottom:20px solid #FFF;  } #joy_right {  left:-40px;  top:20px ;  width:20px;   height:0px;   overflow:hidden;   border-right:20px solid #FFF;  border-bottom:20px solid #666;  } .por {  position:relative;   float:left;  }</style></head><body> <div id="wrapper" >  <div id="corner">  </div>  <p>蓝色理想，你是偶的家园！</p>  <p>蓝色理想，你是偶的家园！</p>  <p>蓝色理想，你是偶的家园！</p> </div> <div id="joy_left" class="por"> </div> <div id="joy_top" class="por"> </div> <div id="joy_bottom" class="por"> </div> <div id="joy_right" class="por"> </div></body></html>