CSS制作三角形和按钮

用上一篇博文中关于边框样式的知识点，能制作出三角形和按钮。

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

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

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

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

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

源代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>正方形</title>
  6.     <style>
  7.     .div{
  8.         width: 0px;
  9.         height: 0px;
  10.         border-top:50px solid red;
  11.         border-bottom:50px solid green;
  12.         border-left:50px solid yellow;
  13.         border-right:50px solid blue;
  14.         /*注意：四条边框的宽度必须相同！*/
  15. }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="div"></div>
  20. </body>
  21. </html>

效果如下：

 

现在，要把其中一个三角形取出来，其实就是要把其他的隐藏掉

源代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>制作三角形箭头</title>
  6.     <style>
  7.     .arrow{
  8.         width:0;
  9.         height:0;
  10.         border-top:50px solid #000;     /*设置并显示上边框*/
  11.         border-bottom:none;             /*不设置下边框*/
  12.         border-left:50px solid transparent;     /*设置但隐藏左边框*/
  13.         border-right:50px solid transparent;    /*设置但隐藏右边框*/
  14.     }
  15.     .arrow:hover{
  16.         border-top:none;                  /*鼠标经过时，不设置上边框*/
  17.         border-bottom:50px solid #000;    /*鼠标经过时，设置并显示下边框*/
  18.     }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="arrow"></div>
  23. </body>
  24. </html>

效果如下：

 

接下来，我分享一种按钮的做法

主要是利用边框样式、盒子阴影和伪类效果来实现的

源代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS制作按钮</title>
  6.     <style type="text/css">
  7.     .btn{
  8.         width:100px;
  9.         height:100px;
  10.         background:#ccc;
  11.         border-radius:50%;
  12.         box-shadow:5px 5px 10px #000;   /*设置外阴影*/
  13.     }
  14.     .btn:active{
  15.         background:#bbb;
  16.         box-shadow:5px 5px 10px #000 inset;    /*设置内阴影*/
  17.     }
  18.     .btn div{
  19.         font-size:30px;
  20.         font-family:"微软雅黑";
  21.         color:blue;
  22.         float:left;
  23.         margin-top:28px;
  24.         margin-left:20px;
  25.     }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="btn">
  30.         <a href="###">
  31.             <div>开始</div>
  32.         </a>
  33.     </div>
  34. </body>
  35. </html>

效果：

开始

效果可能不太美观，有待提升，大家可以发挥自己的想象做出更好的效果，祝大家学习愉快！

CSS制作三角形和按钮的更多相关文章

  1. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  2. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

  3. css制作三角形，下拉框三角形

    网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...

  4. 利用CSS制作三角形

    在我们看到类似于这样的图片时: 我们一般都会想,哎,这还不简单,用一张图片就可以了. 的确,用图片可以很轻松地做到.不过我们接下来要讨论的是: 如何用css也作出这样的效果.   首先,我们来定义一个 ...

  5. css制作三角形

    #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid tr ...

  6. css 制作三角形图标 不支持IE6

    .triangle { width: 10px; height: 10px; overflow: hidden; border-left: 4px solid rgba(, , , ); border ...

  7. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

  8. css制作tips提示框，气泡框，制作三角形

    有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...

  9. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

随机推荐

  1. 在.Net中实现自己的简易AOP

    RealProxy基本代理类 RealProxy类提供代理的基本功能.这个类中有一个GetTransparentProxy方法,此方法返回当前代理实例的透明代理.这是我们AOP实现的主要依赖. 新建一 ...

  2. Atitit 项目语言的选择 java c#.net  php??

    Atitit 项目语言的选择 java c#.net  php?? 1.1. 编程语言与技术,应该使用开放式的目前流行的语言趋势1 1.2. 从个人职业生涯考虑,java优先1 1.3. 从项目实际来 ...

  3. 红黑树——算法导论(15)

    1. 什么是红黑树 (1) 简介     上一篇我们介绍了基本动态集合操作时间复杂度均为O(h)的二叉搜索树.但遗憾的是,只有当二叉搜索树高度较低时,这些集合操作才会较快:即当树的高度较高(甚至一种极 ...

  4. 自定义Inspector检视面板

    Unity中的Inspector面板可以显示的属性包括以下两类:(1)C#以及Unity提供的基础类型:(2)自定义类型,并使用[System.Serializable]关键字序列化,比如: [Sys ...

  5. EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解

    前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...

  6. HDU1671——前缀树的一点感触

    题目http://acm.hdu.edu.cn/showproblem.php?pid=1671 题目本身不难,一棵前缀树OK,但是前两次提交都没有成功. 第一次Memory Limit Exceed ...

  7. ASP.NET从零开始学习EF的增删改查

           ASP.NET从零开始学习EF的增删改查           最近辞职了,但是离真正的离职还有一段时间,趁着这段空档期,总想着写些东西,想来想去,也不是很明确到底想写个啥,但是闲着也是够 ...

  8. scp报错 -bash: scp: command not found

    环境:RHEL6.5 使用scp命令报错: [root@oradb23 media]# scp /etc/hosts oradb24:/etc/ -bash: scp: command not fou ...

  9. POJ1149 PIGS [最大流 建图]

    PIGS Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 20662   Accepted: 9435 Description ...

  10. 分享MSSQL、MySql、Oracle的大数据批量导入方法及编程手法细节

    1:MSSQL SQL语法篇: BULK INSERT [ database_name . [ schema_name ] . | schema_name . ] [ table_name | vie ...