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制作三角形和按钮的更多相关文章

  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. Apache 与 php的环境搭建

    Apache和PHP的版本分别为: httpd-2.4.9-win64-VC11.zip php-5.6.9-Win32-VC11-x64.zip 下载地址: php-5.6.9-Win32-VC11 ...

  2. android studio你可能忽视的细节——启动白屏？drawable和mipmap出现的意义？这里都有！！！

    android studio用了很久了,也不知道各位小伙伴有没有还在用eclipse的,如果还有,楼主真心推荐转到android studio来吧,毕竟亲儿子,你会知道除了启动速度稍微慢些,你找不到一 ...

  3. Linux之搭建自己的根文件系统

    Hi!大家好,我是CrazyCatJack.又和大家见面了.今天给大家带来的是构建Linux下的根文件系统.希望大家看过之后都能构建出符合自己需求的根文件系统^_^ 1.内容概述 1.构造过程 今天给 ...

  4. [原] KVM 环境下MySQL性能对比

    KVM 环境下MySQL性能对比 标签(空格分隔): Cloud2.0 [TOC] 测试目的 对比MySQL在物理机和KVM环境下性能情况 压测标准 压测遵循单一变量原则,所有的对比都是只改变一个变量 ...

  5. ADO.NET编程之美----数据访问方式(面向连接与面向无连接)

    最近,在学习ADO.NET时,其中提到了数据访问方式:面向连接与面向无连接.于是,百度了一下,发现并没有很好的资料,然而,在学校图书馆中发现一本好书(<ASP.NET MVC5 网站开发之美&g ...

  6. 深入.NET平台和C#编程总结大全

    对于初学者的你,等到你把这个看完之后就更清楚地认知.NET和C#编程了,好了废话不多说,开始吧!                                                     ...

  7. 设计模式C#合集--抽象工厂模式

    抽象工厂,名字就告诉你是抽象的了.上代码. public interface BMW { public void Drive(); } public class BMW730 : BMW { publ ...

  8. canvas快速绘制圆形、三角形、矩形、多边形

    想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...

  9. css_02之盒模型、渐变

    1.框模型:盒模型,①对象实际宽度=左右外边距+左右边框+左右内边距 + width:②对象实际高度=上下外边距+上下边框+上下内边距 + height: 2.外边距:margin:取值:①top(上 ...

  10. Oracle 10g安装教程

    首先下载安装文件,打开后文件结构如图所示: 安装之前请关闭Windows防火墙并断开网络. xp系统下直接双击运行(本经验以XP系统安装为例进行讲述). 如果是在win7上安装,如图:在setup文件 ...