首页 > 开发 > CSS > 正文

用CSS制作三角形和按钮的简单实例

2024-07-11 08:32:33

字体：大中小

来源：转载

供稿：网友

我先说如何制作三角形吧，相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧，比如说：

网易首页的头部菜单栏中，也会有这样的三角形

当鼠标经过时，三角形会垂直翻转，如下

现在我分享制作三角形的做法，主要是利用边框做成的

首先，四个三角形合并在一起的正方形，也就是正方形的四条边框形成的四个三角形

源代码：

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>

上一篇：关于CSS Padding那些你意想不到的用法示例

下一篇：css background 背景图的设置方法

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注