CSS制作三角形和按钮
CSS制作三角形和按钮
用上一篇博文中关于边框样式的知识点，能制作出三角形和按钮。
我先说如何制作三角形吧，相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧，比如说：
网易首页的头部菜单栏中，也会有这样的三角形，
当鼠标经过时，三角形会垂直翻转，如下：
现在我分享制作三角形的做法，主要是利用边框做成的，
首先，四个三角形合并在一起的正方形，也就是正方形的四条边框形成的四个三角形。
源代码：
<!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>
效果如下：
现在，要把其中一个三角形取出来，其实就是要把其他的隐藏掉
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作三角形箭头</title>
<style>
.arrow{
width:0;
height:0;
border-top:50px solid #000; /*设置并显示上边框*/
border-bottom:none; /*不设置下边框*/
border-left:50px solid transparent; /*设置但隐藏左边框*/
border-right:50px solid transparent; /*设置但隐藏右边框*/
}
.arrow:hover{
border-top:none; /*鼠标经过时，不设置上边框*/
border-bottom:50px solid #000; /*鼠标经过时，设置并显示下边框*/
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
</html>
效果如下：
接下来，我分享一种按钮的做法
主要是利用边框样式、盒子阴影和伪类效果来实现的
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS制作按钮</title>
<style type="text/css">
.btn{
width:100px;
height:100px;
background:#ccc;
border-radius:50%;
box-shadow:5px 5px 10px #000; /*设置外阴影*/
}
.btn:active{
background:#bbb;
box-shadow:5px 5px 10px #000 inset; /*设置内阴影*/
}
.btn div{
font-size:30px;
font-family:"微软雅黑";
color:blue;
float:left;
margin-top:28px;
margin-left:20px;
}
</style>
</head>
<body>
<div class="btn">
<a href="###">
<div>开始</div>
</a>
</div>
</body>
</html>
效果：
效果可能不太美观，有待提升，大家可以发挥自己的想象做出更好的效果，祝大家学习愉快！
CSS制作三角形和按钮的更多相关文章
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- 用css制作三角形
用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...
- css制作三角形，下拉框三角形
网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...
- 利用CSS制作三角形
在我们看到类似于这样的图片时: 我们一般都会想,哎,这还不简单,用一张图片就可以了. 的确,用图片可以很轻松地做到.不过我们接下来要讨论的是: 如何用css也作出这样的效果. 首先,我们来定义一个 ...
- css制作三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid tr ...
- css 制作三角形图标 不支持IE6
.triangle { width: 10px; height: 10px; overflow: hidden; border-left: 4px solid rgba(, , , ); border ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
- css制作tips提示框，气泡框，制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
随机推荐
- SQL Server内存遭遇操作系统进程压榨案例
场景: 最近一台DB服务器偶尔出现CPU报警,我的邮件报警阈(请读yù)值设置的是15%,开始时没当回事,以为是有什么统计类的查询,后来越来越频繁. 探索: 我决定来查一下,究竟是什么在作怪,我排查的 ...
- Socket聊天程序——客户端
写在前面: 上周末抽点时间把自己写的一个简单Socket聊天程序的初始设计和服务端细化设计记录了一下,周二终于等来毕业前考的软考证书,然后接下来就是在加班的日子度过了,今天正好周五,打算把客户端的详细 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（74）-微信公众平台开发-自定义菜单
系列目录 引言 1.如果不借用Senparc.Weixin SDK自定义菜单,编码起来,工作量是非常之大 2.但是借助SDK似乎一切都是简单得不要不要的 3.自定义菜单无需要建立数据库表 4.自定义菜 ...
- ASP.NET MVC开发：Web项目开发必备知识点
最近加班加点完成一个Web项目,使用Asp.net MVC开发.很久以前接触的Asp.net开发还是Aspx形式,什么Razor引擎,什么MVC还是这次开发才明白,可以算是新手. 对新手而言,那进行A ...
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- C++随笔：.NET CoreCLR之GC探索（4）
今天继续来 带大家讲解CoreCLR之GC,首先我们继续看这个GCSample,这篇文章是上一篇文章的继续,如果有不清楚的,还请翻到我写的上一篇随笔.下面我们继续: // Initialize fre ...
- wordpress优化之结合prism.js为编辑器自定义按钮转化代码
原文链接 http://ymblog.net/2016/07/24/wordpress-prism/ 继昨天花了一天一夜的时间匆匆写了主题Jiameil3.0之后,心中一直在想着优化加速,体验更好,插 ...
- 如果你也会C#，那不妨了解下F#（7）：面向对象编程之继承、接口和泛型
前言 面向对象三大基本特性:封装.继承.多态.上一篇中介绍了类的定义,下面就了解下F#中继承和多态的使用吧.
- LINQ to SQL Where条件
1. 适用场景 实现条件的过滤和查询等功能. 2. 说明 跟SQL语句中的where作用相似,都起到了范围的限定即过滤的作用,而判断条件是紧跟后面的条件子句.where主要分为三种形式:简单形式.条件 ...
- Android AndroidRuntime类
AndroidRuntime类是安卓底层很重要的一个类,它负责启动虚拟机以及Java线程,AndroidRuntime类在一个进程中只有一个实例对象保存在全局变量,gCurRuntime中.