<!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. VC++ 非托管代码 & 托管代码

    #pragma managed #pragma unmanaged 看了好多好多非托管代码和托管代码之间相互调用,感觉都没有说在重点上,到底怎么用才是关键,理论的东西我们到微软官网上就可以找到,毕竟这 ...

  2. ABAP 弹出框 函数

    POPUP_GET_VALUES_USER_HELP 是一个和用户交互信息的函数,用户能够填写信息,并且我们还能够依据实际的需求对弹出框进行F1 F4 以及用户的需求进行增强.具体的实现能够參考系统标 ...

  3. spring事务和mysql的隔离级别

    mysql事务.mysql隔离级别.mysql锁.mysql数据一致性.Spring事务.Spring事务传播性之间的关系 一直有些模糊,整理一下.   mysql事务: 在mysql中,只有使用了I ...

  4. Java中如何判断一个日期字符串是否是指定的格式

    判断日期格式是否满足要求 import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Date ...

  5. 九度OJ 1158：买房子 （基础题）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1801 解决:1096 题目描述: 某程序员开始工作,年薪N万,他希望在中关村公馆买一套60平米的房子,现在价格是200万,假设房子价格以每 ...

  6. 该 Bucket 已存在，或被其他用户占用

  7. 使用Fiddler测试HTTP接口

    Fiddler下载地址:https://www.telerik.com/download/fiddler/fiddler4 在测试http接口前,为避免干扰,我们启用过滤器 然后运行过滤器设置 我们以 ...

  8. 【题解】quake

    [题解]\(quake\) 题目大意 我们共有报酬\(f\)元,一条边有它的价值\(w_i\),有它的建造时间\(t_i\).要求建一些边,生成一颗树.求最大的利润率. 数据范围 \(n\le 400 ...

  9. 【总结】性能调优：JVM内存调优相关文章

    [总结]性能调优:JVM内存诊断工具 [总结]性能调优:CPU消耗分析 [总结]性能调优:消耗分析 JVM性能调优

  10. 剑指Offer：对称的二叉树【28】

    剑指Offer:对称的二叉树[28] 题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 题目分析 Java题解 /* publi ...