用css或者js怎么實(shí)現(xiàn)這種傾斜條紋效果？

圖片描述

請(qǐng)問(wèn)這種效果該怎么做？

回答

編輯回答

乖乖噠

哈哈哈，搗鼓了半天，一個(gè)css類搞定了。
原理是用border-image結(jié)合linear-gradient來(lái)搞

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pretty border</title>
</head>
<style>
    .pretty-border {
        width: 400px;
        height: 400px;
        border: 1px solid #d4d4d4;
        border-width: 8px;
        border-image-slice: 8 8 0 0;
        border-image-source: linear-gradient(135deg,#5F58BE 1.5%,
            #F596B8 01.5%,#F596B8 03.0%,
            #460D55 03.0%,#460D55 04.5%,
            #7A313C 04.5%,#7A313C 06.0%,
            #0AE270 06.0%,#0AE270 07.5%,
            #5D4A50 07.5%,#5D4A50 09.0%,
            #88574B 09.0%,#88574B 10.5%,
            #7C35A6 10.5%,#7C35A6 12.0%,
            #D69BA1 12.0%,#D69BA1 13.5%,
            #6B3098 13.5%,#6B3098 15.0%,
            #306944 15.0%,#306944 16.5%,
            #8439AA 16.5%,#8439AA 18.0%,
            #60CE02 18.0%,#60CE02 19.5%,
            #F3E9BD 19.5%,#F3E9BD 21.0%,
            #F031FD 21.0%,#F031FD 22.5%,
            #972B2C 22.5%,#972B2C 24.0%,
            #E86B67 24.0%,#E86B67 25.5%,
            #22DFF8 25.5%,#22DFF8 27.0%,
            #9788BE 27.0%,#9788BE 28.5%,
            #4C094E 28.5%,#4C094E 30.0%,
            #603445 30.0%,#603445 31.5%,
            #A30704 31.5%,#A30704 33.0%,
            #9C7C8C 33.0%,#9C7C8C 34.5%,
            #EC717D 34.5%,#EC717D 36.0%,
            #543466 36.0%,#543466 37.5%,
            #B46659 37.5%,#B46659 39.0%,
            #40C1BE 39.0%,#40C1BE 40.5%,
            #DD9108 40.5%,#DD9108 42.0%,
            #BE4681 42.0%,#BE4681 43.5%,
            #8370A1 43.5%,#8370A1 45.0%,
            #6D5BCE 45.0%,#6D5BCE 46.5%,
            #9ECBAE 46.5%,#9ECBAE 48.0%,
            #2F0ADE 48.0%,#2F0ADE 51.0%,
            #5F58BE 51.0%,#5F58BE 52.5%,
            #F596B8 52.5%,#F596B8 54.0%,
            #460D55 54.0%,#460D55 55.5%,
            #7A313C 55.5%,#7A313C 57.0%,
            #0AE270 57.0%,#0AE270 58.5%,
            #5D4A50 58.5%,#5D4A50 60.0%,
            #88574B 60.0%,#88574B 61.5%,
            #7C35A6 61.5%,#7C35A6 63.0%,
            #D69BA1 63.0%,#D69BA1 64.5%,
            #6B3098 64.5%,#6B3098 66.0%,
            #306944 66.0%,#306944 67.5%,
            #8439AA 67.5%,#8439AA 69.0%,
            #60CE02 69.0%,#60CE02 70.5%,
            #F3E9BD 70.5%,#F3E9BD 72.0%,
            #F031FD 72.0%,#F031FD 73.5%,
            #972B2C 73.5%,#972B2C 75.0%,
            #E86B67 75.0%,#E86B67 76.5%,
            #22DFF8 76.5%,#22DFF8 78.0%,
            #9788BE 78.0%,#9788BE 79.5%,
            #4C094E 79.5%,#4C094E 81.0%,
            #603445 81.0%,#603445 82.5%,
            #A30704 82.5%,#A30704 84.0%,
            #9C7C8C 84.0%,#9C7C8C 85.5%,
            #EC717D 85.5%,#EC717D 87.0%,
            #543466 87.0%,#543466 88.5%,
            #B46659 88.5%,#B46659 90.0%,
            #40C1BE 90.0%,#40C1BE 91.5%,
            #DD9108 91.5%,#DD9108 93.0%,
            #BE4681 93.0%,#BE4681 94.5%,
            #8370A1 94.5%,#8370A1 96.0%,
            #6D5BCE 96.0%,#6D5BCE 97.5%,
            #9ECBAE 97.5%,#9ECBAE 99.0%,
            #2F0ADE 99.0%,#2F0ADE 100.0%            
        );
        

    }
</style>

<body>
    <div class="pretty-border"></div>
</body>

</html>

圖片描述

2017年4月6日 20:14

編輯回答

愛(ài)是癌

用css3漸變來(lái)實(shí)現(xiàn)~另一位童鞋已經(jīng)寫(xiě)了代碼啦

2017年2月6日 14:28

編輯回答

舊時(shí)光

 * {
      padding: 0;
      margin: 0;
    }

    .button {
      width: 10px;
      height: 5px;
      background: #ccc;
      transform: skewX(-45deg);

    }

    #wrap .button {
      float: left;
    }

    .button>div {
      transform: skewX(-45deg);
    }

    #wrap2 {
      width: 10px;
      overflow: hidden;
    }

    #wrap2>div {
      transform: skewY(-45deg);
      height: 10px;
      width: 7px;
    }

html

 <div id="wrap"></div>
  <div id="wrap2"></div>

 let a = ""
  for (let i = 0; i < 30; i++) {
    a += '    <div class="button"></div>'
  }
  $("#wrap").html(a);
  $("#wrap2").html(a);
  for (let i in $(".button")) {
    $(".button").eq(i).css({
      "background": `rgb(` + parseInt(Math.random() * 255) + `,` + parseInt(Math.random() * 255) + `,` +
        parseInt(Math.random() * 255) + `)`
    })
  }
  setInterval(() => {
    for (let i in $(".button")) {
      $(".button").eq(i).css({
        "background": `rgb(` + parseInt(Math.random() * 255) + `,` + parseInt(Math.random() * 255) + `,` +
          parseInt(Math.random() * 255) + `)`
      })
    }
  }, 3000)

2018年8月15日 11:54