您的位置:首页 > Web前端 > CSS

用CSS将div变成三角形

2017-01-05 20:51 169 查看

方形变三角形

通常我们印象中的HTML元素都是四四方方的,但是四四方方的东西也可以构建出完美的三角形哦。因为当一个矩形必须要平分给其上下左右四个方向的时候,就只好平分成四个三角形了。

代码实现

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width:0;
height:0;
border:100px solid;
/* 平分效果 */
/*border-color:red green blue black; */

/* 单个三角形 */
border-color:transparent transparent lightgreen transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>




内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css html 有意思