8

ダイアモンドができ、CSSでストライプができます。ストライプダイヤモンドを取得するために2つをマージする際に問題が発生しています。私のフィドルを見てください（Chromeで動作します）。

どうすればストライプダイヤモンドを作ることができますか？

#diamond {
  width: 0;
  height: 0;
  border: 80px solid transparent;
  border-bottom: 40px solid red;
  position: relative;
  top: -80px
}
#diamond:after {
  content:'';
  position: absolute;
  left: -80px;
  top: 40px;
  width: 0;
  height: 0;
  border: 80px solid transparent;
  border-top: 40px solid red;
}

.stripes {
  height: 80px;
  width: 160px;
  background-size: 4px;
  background-color: red;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, 1)), color-stop(.5, transparent), to(transparent));
}
4

3 に答える 3

5

実際には、たった 1 つの要素とより少ない CSS でそれを行うことができます。

デモ

HTMLは単純です<div class='diamond'></div>

関連するCSS :

.diamond {
    overflow: hidden;
    position: relative;
    padding: 20%;
    width: 0;
    transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}
.diamond:before {
    position: absolute;
    top: 0%; right:  -37.5%; bottom:  0; left:  -37.5%;
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
    background: linear-gradient(90deg, crimson 50%, transparent 50%);
    background-size: 6px;
    content: ''
}
于 2013-01-22T00:05:00.153 に答える
4

指定したコードを使用した CSS ストライプ ダイヤモンド: http://jsfiddle.net/r3PNs/5/

HTML:

<div id="diamond"></div>
<div class="stripes" style=""></div>

CSS:

#diamond {
  width: 0;
  height: 0;
  border: 80px solid transparent;
  border-bottom: 40px solid red;
  position: relative;
  top: -80px;
}
#diamond:after {
  content:'';
  position: absolute;
  left: -80px;
  top: 40px;
  width: 0;
  height: 0;
  border: 80px solid transparent;
  border-top: 40px solid red;
}

.stripes {
  height: 80px;
  width: 160px;
  background-size: 4px;
  background-color: transparent;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, 1)), color-stop(.5, transparent), to(transparent));
  position:absolute;
  top:0;
}
于 2013-01-08T23:15:06.590 に答える
1

境界線を使用してダイヤモンドを作成し、背景を使用してストライプを作成します。これらは一緒には機能しません。代わりに、縞模様のボックスを回転させてダイヤモンドを取得できます。

.stripes {
    height: 80px;
    width: 80px;
    background-size: 4px;
    background-color: red;
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, 1)), color-stop(.5, transparent), to(transparent));
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
于 2013-01-08T22:49:40.913 に答える