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

Question

我的目标设计

我有这个设计 - jsfiddle -

我在边界之前和之后使用过这种方法。

  

::在SPORTS ::之后

for :: 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＆＃39; 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;

Answer 2

这是可以实现的css：

background: #e04f23; /* Old browsers */
background: -moz-linear-gradient(-45deg, #e04f23 0%, #e04f23 80%, #2989d8 80%, #e8cb27 88%, #a227e5 92%, #82e7f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e04f23), color-stop(80%,#e04f23), color-stop(80%,#2989d8), color-stop(88%,#e8cb27), color-stop(92%,#a227e5), color-stop(100%,#82e7f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #e04f23 0%,#e04f23 80%,#2989d8 80%,#e8cb27 88%,#a227e5 92%,#82e7f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #e04f23 0%,#e04f23 80%,#2989d8 80%,#e8cb27 88%,#a227e5 92%,#82e7f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #e04f23 0%,#e04f23 80%,#2989d8 80%,#e8cb27 88%,#a227e5 92%,#82e7f2 100%); /* IE10+ */
background: linear-gradient(135deg, #e04f23 0%,#e04f23 80%,#2989d8 80%,#e8cb27 88%,#a227e5 92%,#82e7f2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e04f23', endColorstr='#82e7f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */