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

2019-09-01 10:34:10 +08:00
 jamfer


看上图
4032 次点击
所在节点    CSS
6 条回复
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
父元素一个红色的大 border 三角形，子元素一个白色的 border 三角形覆盖红色，然后子元素内部再放文字，调整下定位和旋转，
CSGO
2019-09-01 11:42:47 +08:00
@jamfer 是可以，但是我觉得没必要。就像用 excel 和 ppt 画画一样。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/596876

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX