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. 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题

    最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...

  2. 关于如何提高Web服务端并发效率的异步编程技术

    最近我研究技术的一个重点是java的多线程开发,在我早期学习java的时候,很多书上把java的多线程开发标榜为简单易用,这个简单易用是以C语言作为参照的,不过我也没有使用过C语言开发过多线程,我只知 ...

  3. javascript匹配各种括号书写是否正确

    今天在codewars上做了一道题,如下 看上去就是验证三种括号各种嵌套是否正确书写,本来一头雾水,一种括号很容易判断, 但是三种怎么判断! 本人只是个前端菜鸟,,不会什么高深的正则之类的. 于是,在 ...

  4. JavaScript自定义媒体播放器

    使用<audio>和<video>元素的play()和pause()方法,可以手工控制媒体文件的播放.组合使用属性.事件和这两个方法,很容易创建一个自定义的媒体播放器,如下面的 ...

  5. UE4新手引导之下载和安装虚幻4游戏引擎

    1) 进入虚幻4的官方主页(https://www.unrealengine.com/) 这里你可以获得关于虚幻4的最新资讯,包括版本更新.博客更新.新闻和商城等.自2015年起,该引擎已经提供免费下 ...

  6. SignalR系列目录

    [置顶]用SignalR 2.0开发客服系统[系列1:实现群发通讯] [置顶]用SignalR 2.0开发客服系统[系列2:实现聊天室] [置顶]用SignalR 2.0开发客服系统[系列3:实现点对 ...

  7. CSS知识总结（八）

    CSS常用样式 8.变形样式 改变元素的大小,透明,旋转角度,扭曲度等. transform : none | <transform-function> <transform-fun ...

  8. (转载) Linux IO模式及 select、poll、epoll详解

    注:本文是对众多博客的学习和总结,可能存在理解错误.请带着怀疑的眼光,同时如果有错误希望能指出. 同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案 ...

  9. vim环境变量配置、背景色配置

    我们使用vi或者vim的时候,如果想要显示行号,可能会这样做:切换到命令模式,然后输入set nu,再按回车键就显示了:还有就是咱们在编写程序的时候,有的时候会希望按下回车键后,光标不是每次都在行首, ...

  10. AutoMapper使用中的问题

    指定值只会执行一次 public class MomanBaseProfile : Profile { public MomanBaseProfile() { CreateMap<Request ...