CSS实现矩形两边挖半圆

效果如图：

思路：通过伪元素把一个白色的圆（和背景色相同）放在矩形中心两边。

<html><head><style>/* top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 *//* transform:translate(-50%,-50%); 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 */.semi-circle {width: 200px;height: 400px;margin: 200px auto;position: relative;background: #000000;border-radius: 8px;}.semi-circle:after {position: absolute;content: "";width: 20px;height: 20px;background: #fff;border-radius: 100%;right: 0;top: 50%;transform: translate(50%, -50%);}.semi-circle:before {position: absolute;content: "";width: 20px;height: 20px;background: #fff;border-radius: 100%;left: 0;top: 50%;transform: translate(-50%, -50%);}</style></head><body><!-- css 矩形两边挖半圆 --><div class="semi-circle"></div></body>
</html>

CSS实现矩形两边挖半圆相关推荐

css 矩形两边挖半圆
<View className="bound"></View> .bound{ margin: 80px 0; background-color: #fff ...
【css】CSS 如何画两边是半圆的长方形？
首先要定义盒子的宽和高,只需将 border-radius 设为高度的一半即可实现. .radius{width: 300px;height: 200px;background: red;border ...
css圆角矩形及去掉空格属性
css圆角矩形 -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 去掉空格 white-space:nowra ...
CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
转载自:https://blog.csdn.net/lzgs_4/article/details/46827761 在网页中,经常会用到各种Icon,如果老是麻烦设计狮画出来不免有些不好意思,所以有时 ...
css 文字中间两边横线
先看效果图开始的时候两边的横杠我是用了两个标签去写的,现在想想这个写法好low,无脸面对各位前端同胞现在有更简单的方法,来,直接贴代码: .footer {width: 100%;height: ...
css效果（两边渐渐消失的线、边框上下渐变）
两边渐渐消失的线 html如下: <div class="title titleLeft"></div><div class="line&q ...
怎样使用css让矩形出现圆角,CSS中设置元素的圆角矩形
圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...
HTML + CSS 实现矩形/圆形进度条效果 - SVG
本文记录通过 HTML + CSS + 部分原生 JS 使用 SVG 嵌入 HTML 文档的用法实现常见的圆形和矩形进度条效果,效果图如下:(实际运行效果是进度条从 0 过渡到一个目标值比如 100% ...
CSS学习之圆、半圆、四分之一圆以及三角形的创建
1.圆的创建下面这段代码用来实现圆的创建 <style>div.cri {background-color: red;width: 200px;height: 200px;border- ...

CSS实现矩形两边挖半圆

CSS实现矩形两边挖半圆相关推荐

最新文章

热门文章