flexble css,Flexible CSS triangles?

最新推荐文章于 2023-12-03 16:06:37 发布

weixin_39769740

最新推荐文章于 2023-12-03 16:06:37 发布

阅读量88

点赞数

文章标签： flexble css

I think the best compatibility solution would be http://dabblet.com/gist/3184227

It uses just pseudo-elements and CSS transforms (so it works in IE9 and it may be adapted to IE8, where the pseudo-elements could be skewed using a matrix filter - I've never checked whether that actually works... I only know that gradient filters don't work on pseudo-elements).

The idea is really simple: use two pseudo-elements, each having half the height, absolutely position them, one taking up the upper half and the other one the lower half and finally skew them in opposite directions.

HTML:

Add text to see how it scales

Relevant CSS:

.t {

position: relative;

}

.t:before,

.t:after {

left: 0;

right: 0;

position: absolute;

z-index: -1;