css 矩形两边挖半圆

.bound{

margin: 80px 0;

background-color: #fff;

width: 700px;

height: 1000px;

display: flex;

flex-direction: column;

align-items: center;

position: relative;//设置定位

}

.bound::before{

content: "";

width: 80px;

height: 80px;

border-radius: 50%;

display: block;

background: #3EAAF2;

position: absolute;

top:30%;

left: -40px;

transform:translateY(-50%);

}

.bound::after{

content: "";

width: 80px;

height: 80px;

border-radius: 50%;

display: block;

background: #3EAAF2;

position: absolute;

top:30%;

right: -40px;

transform:translateY(-50%);

}

转载于:https://www.cnblogs.com/zxiaoyu/p/10912720.html

css 矩形两边挖半圆相关推荐

CSS实现矩形两边挖半圆
效果如图: 思路:通过伪元素把一个白色的圆(和背景色相同)放在矩形中心两边. <html><head><style>/* top: 50%;left: 50%;, ...
【css】用css画圆，半圆和三角形
用css画圆,半圆和三角形圆,半圆三角形圆,半圆 // 圆宽高相等, border-radius大于宽度的一半 .circle{width: 100px;height: 100px;backg ...
css 矩形边框加粗
css矩形边框加粗的方法第一种 before after 第二种通过背景图片第三种通过子元素定位实现第四种通过background 渐变第一种 before after 长度可调,具体的 ...
【css】CSS 如何画两边是半圆的长方形？
首先要定义盒子的宽和高,只需将 border-radius 设为高度的一半即可实现. .radius{width: 300px;height: 200px;background: red;border ...
css矩形凹陷效果_被低估的CSS滤镜：drop-shadow
如果你熟悉CSS,则可能了解 box-shadow 属性.但是你知道有一个CSS滤镜 drop-shadow 可以做类似的事情吗?就像 box-shadow 一样,我们可以输入x-offset.y-o ...
css画圆、半圆、椭圆、圆环
css画圆在css中利用border-radius可以画出我们想要的圆 border-radius属性可以设置盒子四边的圆弧.从上左,上右,下右,下左顺时针依次设置四个属性也可以单独设置一个方向 ...
HTML+CSS画圆、半圆、扇形、三角形
使用border-radius:____px代码实现圆,半圆,扇形,三角形 1.圆 html中设定一个盒子 css中盒子样式代码实现图 2.半圆 html中设定一个盒子 css中盒子样式代码实现效 ...
用CSS画圆、半圆、线性箭头
一.css画半圆 border-radius 可以设置盒子四边的弧度.可以设置%,px等单位. 在css中利用border-radius可以画出圆形,半圆,等图案半圆需要两个块元素,两个块元素分别设 ...
html在字体两边加直线,CSS文字两边添加横线的几种方法
这里总结了五种关于文字两边添加横线的方法. 欢迎补充! 最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门. 暂且不说哪种方法好,邓爷爷说过不管黑猫白猫抓到老 ...

css 矩形两边挖半圆

css 矩形两边挖半圆相关推荐

最新文章

热门文章