为了账号安全,请及时绑定邮箱和手机立即绑定

如何将div的一边弯曲?

/ 猿问

如何将div的一边弯曲?

QP君 2017-10-10 12:03:37

http://img2.sycdn.imooc.com/59dc464800010a6a10370511.jpg除了用背景图如何将div的顶部像这样弯曲?求大神赐教!

查看完整描述

6 回答

已采纳
?
Samaritan

如果不涉及背景问题,可以在上面放一个 div,背景和主背景一样,设置圆角,盖在图片上面,可以有类似效果


//img2.sycdn.imooc.com/59dc76870001a6e602900255.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>RunJS 演示代码</title>
  </head>
<body>
    <div class='cover'></div>
		 <div class='content'></div>
  </body>
</html>
body {

	width: 1000px;
	height: 600px;
	margin: 0;
	background: #f2f3f7;
	
}

.content {
	width: 200px;
	height: 200px;
	margin:50px auto;
	background: red;
}


.cover {
	position: absolute;
	width: 400px;
	height: 200px;
	left: 300px;
	top: -130px;
	background: #f2f3f7;
	border-radius: 50%;
}


查看完整回答
5 反对 2017-10-10
  • QP君
    QP君
    没办法,涉及到了背景,元素遮挡肯定不行了,而且这个是个轮播,只能用背景图片做了,但是那样轮播起来会有瑕疵
  • QP君
    QP君
    但是也谢谢老师的回答
?
橘子甜心

上边框加样式可以么,弧度?我只知道可以改成箭头那样的。

查看完整回答
反对 2017-10-10
?
慕粉1129562733

不想用PS处理的话,只能尝试去添加和调整新的元素去做遮挡了

查看完整回答
反对 2017-10-10
?
qq_qzuser_1650

感觉这应该是一张图片 而不是div

查看完整回答
反对 2017-10-10
?
林逸舟丶

或者说 实现起来太绕了 不如就直接background。

记得采纳答案。

查看完整回答
反对 2017-10-10
?
林逸舟丶

基本无法实现

查看完整回答
反对 2017-10-10

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信