HTML像这种效果应该怎么实现
0
最佳答案
1
贝塞尔曲线。大致模拟了一下。需要调整一下位置，没什么时间算公式了，仅当一种思路吧。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas height=500px width=500px id='myCanvas'></canvas>
<script>
var c=document.getElementById("myCanvas");
var d1=10,d2=0;
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(60,60);
ctx.bezierCurveTo(110,60,120,70,120,120);
ctx.bezierCurveTo(120,180,110,190,60,190);
ctx.bezierCurveTo(10,190,0,180,0,120);
ctx.bezierCurveTo(0,70,10,60,60,60);
//ctx.bezierCurveTo(20,100,200,100,200,20);
//ctx.stroke();
ctx.fill();
</script>
<div ></div>
<div></div>
</body>
</html>
收获园豆：200
其他回答(1)
0
圆角+背景阴影？
嗯 是呢 不过目前的话 可以先画形状
@轻描余殇: 等我晚上给你整个demo
@flyfishing: 嗯呢 感谢大佬 大佬喝冰可乐.jpg
@轻描余殇: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
padding-top: 10px;
box-sizing: border-box
}
.tab_box {
width: 100px;
min-height: 100px;
margin: 0px auto;
border: 1px solid #e2e2e2;
border-radius: 20px;
box-shadow: 0 2px 4px 2px rgba(0,0,0,.08);
background-color: #b6ff00;
}
.tab_content .tab_item {
display: none;
padding: 20px;
/min-height: 100px;/
}
.tab_content .tab_item.active {
display: block;
}
</style>
</head>
<body>
<div class="tab_box" id="tab_box">
<div class="tab_content">
<div class="tab_item active">
</div>
</div>
</div>
</body>
</html>
@flyfishing: 大佬 这个怕不对吧！和效果图上的那个还是有区别的 阴影啥的都是次要的 主要的还是这个形状！
@轻描余殇: border-radius 自己 F12 加加减减就可以了。阴影颜色 box-shadow: 0 2px 4px 2px rgba(0,0,0,.08); rgba 自己也可以调
@轻描余殇: 我都试过的，没问题的。
@flyfishing: 像上面我贴图的那种效果如果只是普通用border-radius来设置的话 应该是设置不出来吧！有点像个墩子 冬瓜圆 现在阴影我都不需要了 我就只需要个形状 好尴尬.....
@轻描余殇: 你这个。。。要跟别人完全一样。。去抠css啊。或者 你看图上的 图标 可以分为 8个面，8个div里边自己调整 css样式，总可以的
@flyfishing: 这是设计图 没有实质的样式 下面那个老哥倒是提供了一个思路就是用贝塞尔曲线来玩 有点难.............
@轻描余殇: 只能这样了。css 做起来也难
