利用border-radius属性写个简单的左右内弧,上下外弧的框

很久没有写博客了，虽然写的博客质量确实也不咋地

但本着聊胜于无，又或者是对自己所掌握的技术一个整理，还是可以写写

今天一个在网上认识的朋友问我一个技术上的小问题，用样式写一个图形，图形如下：

  图形的结构很清晰、简单；就是上下一个的圆角，左右是向内的一个弧形；

圆角我们都知道能通过css3的圆角属性border-radius来实现；

剩下的就在于左右两边的弧形了；

很可惜的就是border-radius没有像box-shadow属性那样可以设置向内（inset）或向外，

但是我们不妨变通一下，在上图的框左右两侧各加一个框覆盖在它上面，同时两个框带上背景色；

剩下没有被遮住的地方自然就是我们想要得到的图形了

有了思路我们就来写html代码

<div class="box">
<div class="box1"></div>
</div>

左右两个框我们可以分别用.box:before和.box1:before然后超出box的部分就隐藏起来；

到这里我们的思路已经就很清晰了,那么我们的css3就应该是这样子

* {
	margin: 0;
	padding: 0;
}

.box1 {
	position: relative;
	width: 40px;
	height: 200px;
	margin: 30px auto;
	background-color: #222;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	overflow: hidden;
}

.box1:before,.box2 {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	display: block;
	width: 80px;
	height: 400px;
	border-radius: 50%;
	background-color: #fff;
}

.box1:before {
	-webkit-transform: translate(-121%, -50%);
	-moz-transform: translate(-121%, -50%);
	-ms-transform: translate(-121%, -50%);					
	transform: translate(-121%, -50%);	
}

.box2 {
	-webkit-transform: translate(21%, -50%);
	-moz-transform: translate(21%, -50%);
	-ms-transform: translate(21%, -50%);					
	transform: translate(21%, -50%);	
}

最近比较喜欢用 position 加 translate来定位元素位置

以上纯属个人愚见，暂时没想到更好的办法，谁要有更好的方法望不奢赐教！！谢谢