zoukankan      html  css  js  c++  java
  • CSS实现带箭头按钮

    效果如下:

    思路:

      首先把按钮的边框设置好,然后去掉按钮的右边框,

      然后给按钮添加伪元素:before和:after,绝对定位于按钮的右边,top值为-按钮边框的高度,边框宽度为按钮高度(包括边框)的1/2,边框颜色为透明色

      伪元素:after的right值为:-按钮的高度(包括边框)-1,左边框颜色为按钮的背景色

      伪元素:before的right值为:-按钮的高度(包括边框),左边框颜色为按钮的边框色即可

    示例代码:

      CSS:

    .button{display:inline-block; position:relative; cursor:pointer; height:36px; line-height:36px; padding:0 15px; border:1px solid red; border-right:none; background:white;}
    .button:before,.button:after{position:absolute; right:-37px; top:-1px; border:19px solid transparent; border-left-color:white; content:' ';}
    .button:before{right:-38px; border-left-color:red;}

    HTML:

    <div class="button">带箭头按钮</div>

    在线演示:http://sandbox.runjs.cn/show/76qt2aum

  • 相关阅读:
    AD7606笔记
    转Keil 中使用 STM32F4xx 硬件浮点单元
    旋转编码器
    PT100/PT1000
    电压跟随器
    段式液晶驱动方法
    物联网的架构
    物联网的操作系统
    C8051开发环境
    解决time命令输出信息的重定向问题
  • 原文地址:https://www.cnblogs.com/chenxiangling/p/7763232.html
Copyright © 2011-2022 走看看