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. 多线程的通信和同步(Java并发编程的艺术--笔记)

    1. 线程间的通信机制 线程之间通信机制有两种: 共享内存.消息传递.   2. Java并发 Java的并发采用的是共享内存模型,Java线程之间的通信总是隐式执行,通信的过程对于程序员来说是完全透 ...

  2. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

  3. UWP开发之Mvvmlight实践八：为什么事件注销处理要写在OnNavigatingFrom中

    前一段开发UWP应用的时候因为系统返回按钮事件(SystemNavigationManager.GetForCurrentView().BackRequested)浪费了不少时间.现象就是在手机版的详 ...

  4. linux应用调试技术之GDB和GDBServer

    1.调试原理 GDB调试是应用程序在开发板上运行,然后在PC机上对开发板上得应用程序进行调试,PC机运行GDB,开发板上运行GDBServer.在应用程序调试的时候,pc机上的gdb向开发板上的GDB ...

  5. 使用HttpClient的优解

    新工作入职不满半周,目前仍然还在交接工作,适应环境当中,笔者不得不说看别人的源码实在是令人痛苦.所幸今天终于将大部分工作流畅地看了一遍,接下来就是熟悉框架技术的阶段了. 也正是在看源码的过程当中,有一 ...

  6. Atitit.attilax软件研发与项目管理之道

    Atitit.attilax软件研发与项目管理之道 1. 前言4 2. 鸣谢4 3. Genesis 创世记4 4. 软件发展史4 5. 箴言4 6. 使徒行传 4 7. attilax书 4 8. ...

  7. Jquery 获得当前标签的名称和标签属性

    得到标签的名称 $("#name").prop("tagName"); 或者 $("#name")[0].tagName; 注意:1.得到的 ...

  8. Apache2.4：AH01630 client denied by server configuration

    问题说明:Apache服务总共有4个,是为了防止单点故障和负载均衡,负载均衡控制由局方的F5提供. 访问的内容在NAS存储上,现象是直接访问每个apache的服务内容都是没有问题,但是从负载地址过来的 ...

  9. 类型转换器(InitBinder 初始化绑定器)

    单日期格式 导入jar包 创建FirstController.java @Controller public class FirstController { /** * @param binder * ...

  10. 【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...