怎么用CSS 画出三角形 如下图片所示 不能采用背景和CSS3实现
3个回答
展开全部
尝试下面的代码：
<div style="border-top:solid 160px blue;border-left:solid 160px red;height:0px;width:0px;"></div>
追问
希望做出画的原图样子 不需要填充 只要边框黑色细线
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼word文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景...
点击进入详情页
本回答由博思aippt提供
展开全部
<style>
.div1{
width:0px;
height:0px;
border-top:200px solid black;
border-left:200px solid white;
}
.div2{
width:0px;
height:0px;
border-top:197px solid white;
border-left:197px solid transparent;
position:relative;
top:-199px;
left:2px;
}
.div1:before{
width:200px;
border-top:1px solid black;
position:relative;
left:-200px;
top:-1px;
content:"";
display:block;
}
.div1:after{
height:200px;
border-right:1px solid black;
position:relative;
left:-200px;
top:-201px;
content:"";
display:block;
}
</style>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
</body>
喜欢穷讲究的打包带走。。。
FF表现合格，其他浏览器自己慢慢调试。
追问
挖 很好啊！那不管IE6了吗？
追答
IE6的问题就是BORDER无法使用transparent属性，听说可以使用滤镜，不过那个忒麻烦，估计也没人去拿IE6琢磨这个。。。。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
还有一个思路就是利用对符号\的操作达到
<style>
.box{
position:absolute;
height:80px;
width:160px;
border:2px solid #000;
line-height:0px;
}
.box2{
position:absolute;
height:178.88px;
width:178.88px;
border:2px solid #000;
border-bottom-color:white;
border-left-color:white;
border-right-color:white;
line-height:0px;
left:41px;
top:44px;
-moz-transform: rotate(-27deg);
}
</style>
<body>
<table>
<tr>
<td class="box"></td>
<td class="box2"></td>
</tr>
</table>
</body>
transform用法：
transform: rotate(40deg);
-o-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
下面的是IE用的滤镜用法 应该不算CSS3吧
filter: progid:DXImageTransform.Microsoft.Matrix( SizingMethod= sMethod , M11= fM11 , M12= fM12 , M21= fM21 , M22= fM22 )
例子：
filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto
expand');
<style>
.box{
position:absolute;
height:80px;
width:160px;
border:2px solid #000;
line-height:0px;
}
.box2{
position:absolute;
height:178.88px;
width:178.88px;
border:2px solid #000;
border-bottom-color:white;
border-left-color:white;
border-right-color:white;
line-height:0px;
left:41px;
top:44px;
-moz-transform: rotate(-27deg);
}
</style>
<body>
<table>
<tr>
<td class="box"></td>
<td class="box2"></td>
</tr>
</table>
</body>
transform用法：
transform: rotate(40deg);
-o-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
下面的是IE用的滤镜用法 应该不算CSS3吧
filter: progid:DXImageTransform.Microsoft.Matrix( SizingMethod= sMethod , M11= fM11 , M12= fM12 , M21= fM21 , M22= fM22 )
例子：
filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto
expand');
追问
你这个不错。。IE6 下 好像不行
追答
那试试利用对符号\的操作达到这种效果吧或者其他的一些特殊字符╱╲╲╱╳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
