html - 如何在两侧实现多种颜色和对 Angular 线形式的背景？

Question

我的目标设计

我有这个设计 -- jsfiddle --

我在边框前后都用了这个方法。

::before SPORTS ::after

用于::after css

display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: '';
border-color: inherit;
border-top: 0 solid rgba(255, 255, 255, 0);
border-bottom: 35px solid rgba(255, 255, 255, 0);
border-left: 10px solid #f54545;
-ms-box-sizing: border-box;
text-rendering: optimizeLegibility;

并且我为 ::after 尝试了所有可能的 css，例如 -webkit-border-image、background css 等

如何实现目标设计。

Answer 1

我的解决方案来自 danko 的 jsfiddle 下面的 css 对我很有帮助

background: linear-gradient(to right, #ff3333 0%, #ff3333 85%,#3399cc 85%,#3399cc 90%,#ffff66 90%, #ffff66 95%, #ff0099 95%, #ff0099 100%);
width:100%;
height:100%;
-webkit-transform:skewX(-25deg);
-webkit-backface-visibility: hidden;