<!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. Android使用ViewPager实现无限循环滑动及轮播(附源代码)

    MainActivity例如以下: package cc.ww; import java.util.ArrayList; import android.app.Activity; import and ...

  2. springcloud和kubernetes对比

    由于这两个都不熟,所以在考虑学哪个. 先说结论:都要学,但是重点学k8s,k8s是一个更加完善的解决方案,springcloud被淘汰只是时间的问题. 从自己的经历和网上的文章两方面分析 个人经历: ...

  3. Centos7重新安装yum

    Centos7重新安装yum rpm -qa|grep yum 然后用下面的命令删除出现的xxx包: rpm -e --nodeps xxx 下载 python-urlgrabber-3.10-8.e ...

  4. 引用变量的类型强转以及InstanceOf方法的使用

    引用到的类: class Person{ String name; } class Student extends Person{ String sut_no; } class ClassMate e ...

  5. [2018-08-25]模板引擎Razor Engine 用法示例

    好久没写博客了,回宁波后最近几个月一直忙些线下的事情. 敲代码方面脱产有阵子了,生疏了,回头一看,这行业果然更新飞快. 最近线下的事情基本忙完,准备开始干回老本行,最重要的一件事就是升级abplus库 ...

  6. B. Two Buttons

    这是Codeforces Round #295 (Div. 2) 的B 题,题意为: 给出n, m, 有两种操作,n 减一 和 n 乘以 2,问最少要多少次操作才能把n 变成 m. Sample te ...

  7. http://blog.csdn.net/renfufei/article/details/37725057/

    版权声明:本文为博主原创文章,未经博主允许不得转载. 原创:http://blog.csdn.net/renfufei/article/details/37725057/ 说明: 首先,你需要注册一个 ...

  8. windows下的git使用指令

    经常使用mac和linux 这次使用window开发了一些小项目 废话不多说: git init git add . git commit -m 'note' git remote add origi ...

  9. 白话 P-value

    准备再尝试一下,用大白话叙述一遍统计推断中最基础的东西(假设检验.P值.……),算是把这段时间的阅读和思考做个梳理(东西不难,思考侧重在如何表述和展示).这次打算用一种“迂回的”表达方式,比如,本文从 ...

  10. 时间序列数据库——索引用ES、聚合分析时加载数据用什么？docvalues的列存储貌似更优优势一些

    加载 如何利用索引和主存储,是一种两难的选择. 选择不使用索引,只使用主存储:除非查询的字段就是主存储的排序字段,否则就需要顺序扫描整个主存储. 选择使用索引,然后用找到的row id去主存储加载数据 ...