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. Web性能优化：图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  2. SQLServer执行命令出现“目录无效的提示”

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 一般都是清理垃圾清理过头了,把不该删的目录删了 网上说法: 问题描述: 1.s ...

  3. ASP.NET Core应用中如何记录和查看日志

    日志记录不仅对于我们开发的应用,还是对于ASP.NET Core框架功能都是一项非常重要的功能特性.我们知道ASP.NET Core使用的是一个极具扩展性的日志系统,该系统由Logger.Logger ...

  4. VS15 preview 5打开文件夹自动生成slnx.VC.db SQLite库疑惑？求解答

    用VS15 preview 5打开文件夹(详情查看博客http://www.cnblogs.com/zsy/p/5962242.html中配置),文件夹下多一个slnx.VC.db文件,如下图: 本文 ...

  5. 如何使用本地账户"完整"安装 SharePoint Server 2010+解决“New-SPConfigurationDatabase : 无法连接到 SharePoint_Config 的 SQL Server 的数据 库 master。此数据库可能不存在，或当前用户没有连接权限。”

    注:目前看到的解决本地账户完整安装SharePoint Server 2010的解决方案如下,但是,有但是的哦: 当我们选择了"完整"模式安装SharePointServer201 ...

  6. 编译器开发系列--Ocelot语言7.中间代码

    Ocelot的中间代码是仿照国外编译器相关图书Modern Compiler Implementation 中所使用的名为Tree 的中间代码设计的.顾名思义,Tree 是一种树形结构,其特征是简单, ...

  7. https 安全验证问题

    最近为了满足苹果的 https 要求, 经过努力终于写出了方法 验证 SSL 证书是否满足 ATS 要求 nscurl --ats-diagnostics --verbose https://你的域名 ...

  8. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  9. 在ASP.NET MVC 4 on Mono中使用OracleClient in CentOS 6.x的问题记录

    在ASP.NET MVC 4 on Mono中使用OracleClient in CentOS 6.x的问题记录 前言 最近有个Web项目,业务功能不复杂,但是这个客户(某政府部门)有两个硬性要求:1 ...

  10. Lesson 15 Good news

    Text The secretary told me that Mr. Harmsworth would see me. I felt very nervous when I went into hi ...