web-dev-qa-db-ja.com

CSSでマルチカラーのボーダーを作成する方法は？

下の画像のようなマルチカラーのボーダーを作成するにはどうすればいいですか？

enter image description here

cssbordercss-shapes
19
Hamed mayahian

pseudo-elementsを使用せずに、border-image: linear-gradientを使用してそれを行うことができます

.fancy-border {
  width: 150px;
  height: 150px;
  text-align:center;
  border-top: 5px solid;
  border-image:   linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;
}
<div class="fancy-border">
  my content
</div>
32
Theodore K.

それを試してみてください。

<div class="test"></div>

    .test {
      width: 500px;
      height: 100px;
      background-color: #ccc;
      position: relative;
    }

    .test:before, .test:after {
      content: "";
      position: absolute;
      left: 0px;
      right: 0px;
      height: 10px;
      background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
      background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
      background-size: 80px;
    }

    .test:before {
      top: 0px;
    }
    .test:after {
      bottom: 0px;
    }

デモを見る

http://jsfiddle.net/yH59y/

2
Neeraj Prajapati