一个demo 目的是实现 浏览器内一个div的居中,然后在div的对角上分别加一个四分之一圆。
首先 要实现浏览器内居中,怎么实现呢?
第一步肯定是建立一个div,并且设置它的高度宽度。
第二步是把它的position属性设置为absolute,并设置top和left的参数设置为50%,这样div的左上角就居中了。下一步就是要让div的中心居中。
第三步是通过 translate 位移元素使之中心居中,由于 translate 支持百分比,所以也就不用自己算偏移量了,
transform: translate(-50%, -50%)
这样就解决了居中问题。
.main{ background-color: #205AA7; width: 400px; height: 200px; position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
接下来实现在对角画圆。
添加一个div<>
设置高度宽度为想要的圆的直径,然后利用border-radius,把border-radius的参数设置为50%就成了一个圆
width: 100px; height: 100px; border-radius: 50%;
但是我们要求的是顶角半圆,所以要把它设置为移动。
于是 还是利用 position 把它移动,position的属性为absolute(相对于父元素),因为圆的直径为width和height的50%,所以现在要把它往左上角移动50px,
position: absolute; left: -50px;
top: -50px;
但是这样做并没有完成,由于使用了position:absolute使得这个圆脱离了文档流,把它往左上角移之后,其余的四分之三为出现在div的外面,这不是我们需要的。
那么,怎么解决呢?
可以在.div中添加overflow:hidden,则溢出的部分隐藏。
这样效果就出来了,
代码如下
<style> .main{ background-color: #205AA7; width: 400px; height: 200px; position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); overflow: hidden; } .left-top{ background-color: #ffcc00; position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; border-radius: 50%; } </style> </head> <body> <div class="main"> <div class="left-top"> </div> <div class="right-bottom"> </div> </div>