用CSS制作三角形和按钮的简单实例
70 浏览量
2020-12-13
17:36:15
上传
评论
收藏 79KB PDF 举报
用用CSS制作三角形和按钮的简单实例制作三角形和按钮的简单实例
我先说如何制作三角形吧，相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧，比如说：
网易首页的头部菜单栏中，也会有这样的三角形
当鼠标经过时，三角形会垂直翻转，如下
现在我分享制作三角形的做法，主要是利用边框做成的
首先，四个三角形合并在一起的正方形，也就是正方形的四条边框形成的四个三角形
源代码：源代码：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方形</title>
<style>
.div{
width: 0px;
height: 0px;
border-top:50px solid red;
border-bottom:50px solid green;
border-left:50px solid yellow;
border-right:50px solid blue;
/*注意：四条边框的宽度必须相同！*/
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
效果如下：效果如下：
现在，要把其中一个三角形取出来，其实就是要把其他的隐藏掉
源代码：源代码：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作三角形箭头</title>
<style>
.arrow{
width:0;
height:0;
border-top:50px solid #000; /*设置并显示上边框*/
评论0