简体   繁体   中英

diagonal lines as background for css - how to switch angle

http://jsbin.com/enazac/1/

How do I change the direction so that instead of the lines going in "\\" direction, they can go in "/" direction? I found this css online and I love it, just need to switch directions.

Warning: I trimmed the css down quite a bit so that it works definitely in Chrome, I'm not sure if other browsers will render it. Thanks.

Css:

.diagonal_lines_pattern {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #E76801), color-stop(0.25, #E76801), color-stop(0.25, #EC7F24), color-stop(0.5, #EC7F24), color-stop(0.5, #E76801), color-stop(0.75, #E76801), color-stop(0.75, #EC7F24));
  background-size: 20px 20px;
  width:100%;
  height:100%;
}
.diagonal_lines_pattern{
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #E76801), color-stop(0.25, #E76801), color-stop(0.25, #EC7F24), color-stop(0.5, #EC7F24), color-stop(0.5, #E76801), color-stop(0.75, #E76801), color-stop(0.75, #EC7F24));
    background-size: 20px 20px;
    width:100%;
    height:100%;
}

Play around with the CSS... Change lefts to rights, tops to bottoms...

-webkit-gradient(linear, left top, right bottom,...

More info on -webkit-gradient

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM