首页 新闻 搜索 专区 学院

HTML像这种效果应该怎么实现

0
悬赏园豆:200 [已解决问题] 解决于 2020-08-31 15:31

直接设置border-radius为多少的可以洗洗睡了,仔细看效果图。最好能用CSS就实现,后面div里面可能会设置图片,亦或者用canvas来画

轻描余殇的主页 轻描余殇 | 初学一级 | 园豆:22
提问于:2020-08-28 10:20
< >
分享
最佳答案
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
首席吐槽官秦寿 | 小虾三级 |园豆:531 | 2020-08-28 15:15
其他回答(1)
0

圆角+背景阴影?

flyfishing | 园豆:775 (小虾三级) | 2020-08-28 13:37

嗯 是呢 不过目前的话 可以先画形状

支持(0) 反对(0) 轻描余殇 | 园豆:22 (初学一级) | 2020-08-28 15:22

@轻描余殇: 等我晚上给你整个demo

支持(0) 反对(0) flyfishing | 园豆:775 (小虾三级) | 2020-08-28 17:39

@flyfishing: 嗯呢 感谢大佬 大佬喝冰可乐.jpg

支持(0) 反对(0) 轻描余殇 | 园豆:22 (初学一级) | 2020-08-28 17:40

@轻描余殇: <!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>

支持(0) 反对(0) flyfishing | 园豆:775 (小虾三级) | 2020-08-29 16:45

@flyfishing: 大佬 这个怕不对吧!和效果图上的那个还是有区别的 阴影啥的都是次要的 主要的还是这个形状!

支持(0) 反对(0) 轻描余殇 | 园豆:22 (初学一级) | 2020-08-29 17:05

@轻描余殇: border-radius 自己 F12 加加减减就可以了。阴影颜色 box-shadow: 0 2px 4px 2px rgba(0,0,0,.08); rgba 自己也可以调

支持(0) 反对(0) flyfishing | 园豆:775 (小虾三级) | 2020-08-29 17:08

@轻描余殇: 我都试过的,没问题的。

支持(0) 反对(0) flyfishing | 园豆:775 (小虾三级) | 2020-08-29 17:12

@flyfishing: 像上面我贴图的那种效果如果只是普通用border-radius来设置的话 应该是设置不出来吧!有点像个墩子 冬瓜圆 现在阴影我都不需要了 我就只需要个形状 好尴尬.....

支持(0) 反对(0) 轻描余殇 | 园豆:22 (初学一级) | 2020-08-29 17:12

@轻描余殇: 你这个。。。要跟别人完全一样。。去抠css啊。或者 你看图上的 图标 可以分为 8个面,8个div里边自己调整 css样式,总可以的

支持(0) 反对(0) flyfishing | 园豆:775 (小虾三级) | 2020-08-29 17:21

@flyfishing: 这是设计图 没有实质的样式 下面那个老哥倒是提供了一个思路就是用贝塞尔曲线来玩 有点难.............

支持(0) 反对(0) 轻描余殇 | 园豆:22 (初学一级) | 2020-08-29 17:23

@轻描余殇: 只能这样了。css 做起来也难

支持(0) 反对(0) flyfishing | 园豆:775 (小虾三级) | 2020-08-29 17:28
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册