<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

      .btn {

        width: 100px;

        text-align: center;

        height: 50px;

        line-height: 50px;

        background: #000;

        color: #fff;

        position: relative;

      }

      .btn:after {

        position: absolute;

        content: '';   ------------主要是为了撑开容器div

        width: 30px;

        height: 30px;

        background: #fff;

        top: 10px;

        right: -15px;

        border-radius: 100%;

      }

    </style>

</head>

<body>

 <div class="btn">

   button

 </div>

</body>

</html>

如何用CSS实现矩形按钮右边缘的中间有个往里凹的小半圆的更多相关文章

  1. CSS实现矩形按钮右边缘的中间有个往里凹的小半圆

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  3. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  4. 「HTML+CSS」--自定义按钮样式【002】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  5. 如何用CSS实现在新窗口打开链接？

    *如何用CSS实现在新窗口打开链接? <style type="text/css"> <!-- .target2 a:active {test:expressio ...

  6. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  7. css圆角矩形及去掉空格属性

    css圆角矩形 -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 去掉空格 white-space:nowra ...

  8. 一张png图片 上面有多个图标，如何用CSS准确的知道其中某个图片的坐标

    一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标 ,如下图 可以使用  background background:url(images/xx.png) 40px 10px n ...

  9. css笔记——css 实现自定义按钮

    css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...

随机推荐

  1. C#连接Oracle的问题（不安装客户端）

     win7环境,本地没有安装oracle或者客户端,现在需要程序里连接远程oracle DB: 如果采用System.Data.OracleClient肯定是不行的,这个要安装客户端的: 所以就尝试O ...

  2. UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position xxx ordinal not in range(12

    python在安装时,默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报这样的错UnicodeDecodeError: 'ascii' codec can't deco ...

  3. SWT经常使用组件

    1button组件(Button) (1)Button组件经常使用样式 SWT.PUSHbutton SWT.CHECK多选button SWT.RADIO单选button SWT.ARROW箭头bu ...

  4. 首选项框架PreferenceFragment部分源代码分析

    由于要改一些settings里面的bug以及之前在里面有做过勿扰模式,准备对勿扰模式做一个总结,那先分析一下settings的源代码,里面的核心应该就是android3.0 上面的首选项框架Prefe ...

  5. API自动化测试利器——Postman

    自从开始做API开发之后,我就在寻找合适的API测试工具.一开始不是很想用Chrome扩展,用的WizTools的工具,后来试过一次Postman之后就停不下来了,还买了付费的Jetpacks.推出T ...

  6. php总结2——php中的变量、数据类型及转换、运算符、流程控制中的分支结构

    2.1  php中的变量: 定义变量:$变量名称=值: 变量名称:$开头    $之后的第一位必须是字母    $第二位之后可以是字母.数字或者是下划线.习惯上变量名称有实际含义,第二个单词后首字母大 ...

  7. Android 进程增加存活率

    引用 : http://geek.csdn.net/news/detail/68515

  8. (C)结构数组

    结构数组 对于大小相同但是类型不同的数组,定义结构体数组对其很有帮组.例如: char *keyword[NKEYS]; int keycount[NKEYS]; 这两个数组大小相同,因此 可以用另一 ...

  9. hdu 2015校赛1002 Dual horsetail （思维题 ）

    Dual horsetail Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  10. Linux bash shell环境变量以及语法规范

    摘自: http://blog.csdn.net/abc_ii/article/details/8762739