css中怎么设置三角形?

css中怎么设置三角形?下面本篇文章给大家介绍一下CSS创建三角形(小三角)的几种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

CSS创建三角形(小三角)的几种方法

1、CSS 边框

1.png

这也是一个常用的使用方式,如tooltips信息提示框和下拉菜单。以上的示例,这是一个我最喜欢的方法创建小而且有用的三角形。

优点

  • 很容易的通过修改一些CSS代码属性值而更改颜色和大小

  • 这是一个跨浏览器的解决方案。

缺点

  • 这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果

  • 请记住,IE6是不支持透明边界的-如果你关心这个问题

2、HTML 字符

2.png

它是基于使用可用的Unicode字符列表的字符。

优点

  • 它是一个跨浏览器的技术

  • 您可以使用CSS3的text-shadow属性添加阴影。

缺点

  • 不能使用太多的CSS3效果,除了使用文字阴影。

  • 在所有的浏览器,这是相当不可能实现像素完美。

3、CSS 旋转正方形

3.png

理论上,这种方式,你需要使用两个内容块,但是,并没有限制是使用两个元素,所以可以使用一个元素加一个伪元素。

  • 创建一个内容里。例如100×100像素 – 这将包含旋转块。

  • 旋转包含的这个块45度,从而获得一个菱形

  • 将菱形的块向顶部偏移,然后设置溢出,设置父层容器截断

  • There you go!

优点

  • CSS3阴影,渐变等可以更多的使用

缺点

  • 这个解决方案不是跨浏览器的,首先是因为CSS3旋转。

4、HTML5 Canvas

在你的HTML文件中有以下的canvas元素:

<canvas id="triangle" height="100" width="100">Triangle</canvas>

这里的如何使用JavaScript绘制一个三角形:

var canvas = document.getElementById('triangle');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(50, 100);
context.closePath();
context.fillStyle = "rgb(78, 193, 243)";
context.fill();

5、SVG (Scalable Vector Graphics)

这是如何在您的标签,你可以定义一个内联SVG三角形:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
  <polygon points="0,0 100,0 50,100"/>
</svg>

然后,只需添加一些样式:

.svg-triangle{
margin: 0 auto;
width: 100px;
height: 100px;
}
.svg-triangle polygon {
fill:#98d02e;
stroke:#65b81d;
stroke-width:2;
}

查看全部实例展示(http://www.daqianduan.com/example/?pid=4721)

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是css中怎么设置三角形?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏