想用 CSS 画一个这样的图形+文字，应该怎么画？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1909 天前的主题，其中的信息可能已经有所发展或是发生改变。

看上图

6 条回复 • 2019-09-01 11:42:47 +08:00

CSGO

2019-09-01 10:37:20 +08:00

用 SVG 不是很好吗？

jamfer

2019-09-01 10:39:53 +08:00

@CSGO 恩，只是单纯想了解 css 如何实现：）

learnshare

2019-09-01 10:44:55 +08:00

做一个横向的，然后 transform: rotate(45deg);，再通过定位调整位置，以及设置容器 overflow:hidden 即可

jamfer

2019-09-01 10:54:51 +08:00

@learnshare 确实可以实现，3Q

ymyqwe

2019-09-01 10:56:06 +08:00 via iPhone

父元素一个红色的大 border 三角形，子元素一个白色的 border 三角形覆盖红色，然后子元素内部再放文字，调整下定位和旋转，

CSGO

2019-09-01 11:42:47 +08:00

@jamfer 是可以，但是我觉得没必要。就像用 excel 和 ppt 画画一样。