方法说明：两个正方形，一个小的，一个大的，将大的正方向进行旋转，然后移动到小的正方形的合适位置，覆盖小正方形的一部分，使小正方形剩余部分为三角形，再把大正方形的背景色改为浏览器窗口的颜色。
用到知识：
css3 变形-旋转 transform:rotate(Xdeg);
css 定位 position:relative;
html
<body>
<div class="top"></div>
<div class="mainbody"></div>
</body>
css
<style type="text/css">
* {
padding: 0px;
margin: 0px;
} .mainbody { background: blue;
height: 250px;
width: 250px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: relative;
top: -80px;
left: -50px;
background-color: white;
} .top {
height: 100px;
width: 100px;
background: red;
}
</style>
显示结果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANQAAAB1CAIAAAC5/FgEAAABSklEQVR4nO3SMREAMAwDsVApf1CFksL4odIZgIefnSl3zt67fEl5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR2aUR2XqA/xLfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEfmAQdPPVVWZhThAAAAAElFTkSuQmCC" alt="" />