用div加css怎么做出这种菱形框架??或者其他方法??
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用div加css怎么做出这种菱形框架??或者其他方法??相关的知识，希望对你有一定的参考价值。
这个效果是用图做背景的文字其实还是方的，只是没有边缘和背景了而已， 感觉背景就是菱形的了 参考技术A 能写，但是会比较困难，原理如下：
<div>
<span></span>
<span></span><span></span>
<span></span> <span></span>
</div>
用行高只有1的span或者其他元素一行行的堆叠出形状的边框，类似于纯CSS圆角边框，这个可以百度搜一下。当然，CSS3自带圆角边框，border-radius样式。 参考技术B 基本都是一张图，然后到DW写热点，目前CSS2做不了这种的吧 参考技术C 我做网页碰上这样的图，一般都是在PS里面做好图然后切片了，再到DW里面写代码追问
我知道啊,可是这样在dw里写代码的时候不是会底角跟顶角连接没办法像这种边和边连接..
追答接切图的时候就是横切或是竖切。把背景一起切进去，然后前后或是上下拼合一下不就OK了？
本回答被提问者和网友采纳css 这种凹陷下去的效果怎么做
就是边框凹陷下去 应该怎么写
谢谢 ！
<div>
<p>Test</p>
</div>
<style>
div
width: 200px;
height: 200px;
background: #272727;
border: 1px #272727 solid;
p
width: 158px;
line-height: 158px;
color: #fff;
text-align: center;
margin: 20px auto;
border-radius: 4px;
box-shadow: inset 0px 2px 8px 2px #000000;
border: 1px #666 solid;
border-left: 1px #131313 solid;
border-top: 1px #131313 solid;
</style>
当圆角过大时深色边和高光边交界处会露陷，要不露陷的话：
边框渐变，貌似支持的浏览器少
不用边框，用两个div嵌套，外面那个比里面那个大1px，然后外面那个用45度的斜方向背景渐变(支持的浏览器多)，里面那个用背景色加内阴影。
width: 130px;
height: 130px;
border-radius: 4px;
border:1px solid #333;
box-shadow:inset 0 0 5px 5px #ccc;
只能在支持css3的浏览器下工作
其中，模拟凹槽线的重要代码是最后一行，几个数值分别为
x轴的阴影偏移量
y轴的阴影偏移量
模糊度
模糊长度
我这里为了突出效果，长度写的比较大，要完全做到上面截图的效果只能您自己慢慢调了
本回答被提问者采纳 参考技术B css实现不了这样的效果可以做成单独的图片形式
然后用css样式引入 参考技术C <body style="background:#272727;">
<div style="border-radius:5px; background:#1d1d1d; box-shadow:0px 1px 5px #000000 inset; width:200px; height:200px; border-bottom:1px solid #666666; border-left:1px solid #2b2b2b; border-right:1px solid #2b2b2b;"></div>
</body> 参考技术D <div class="lt">
<div class="mei">
</div>
</div>.lt width:100px; height:100px; padding:10px; background:#272727;
.mei width:100px; height:100px; box-shadow:inset 0 0 5px #0c0c0c; border-bottom:1px solid #666; border-left:1px solid #2b2b2b;border-radius:5px; background:#1d1d1d
用到内阴影和圆角。
以上是关于用div加css怎么做出这种菱形框架??或者其他方法??的主要内容，如果未能解决你的问题，请参考以下文章
我想在一个div里用flex方式做出这种布局，请教应该怎么做
用css怎么设置字体的投影，用div+css能不能做出投影的效果，好像没有这个属性FILTER。朋友们能不能帮我解