3

CSS Triangle tutorialの助けを借りて、三角形の作成方法を学びました。

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;   
        border-top: 20px solid #ccc;
}

三角形に境界線を追加しようとしていますが、できませんでした。

私が達成したこと: ここに画像の説明を入力

予想: (灰色の境界線に似たものを試しています) ここに画像の説明を入力

これをチェックしてJSFiddle

これを開始する場所がありません。試してみoutlineましたが、どれも機能しませんでした（機能しないことはわかっています）。

私の質問を読んでくれてありがとう。

どんな助けでも大歓迎です。

注:画像を使用する代わりに CSS でこれを試しています。

4

3 に答える 3

6

メインの三角形または矢印自体が CSS ボーダーを使用して作成されている場合、追加の要素を使用せずに別のボーダーを追加することはできません。以下にいくつかのオプションを示します。

オプション 1:より大きなサイズの疑似要素を使用し、それを親の後ろに配置して境界効果を生成します。

.arrow-down {
  position: relative;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ccc;
}
.arrow-down:before {
  position: absolute;
  content: "";
  left: -22px;
  top: -20px;
  height: 0px;
  width: 0px;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-top: 21px solid black;
  z-index: -1;
}
<div class="arrow-down"></div>

.arrow-down:before {
  position: absolute;
  content: "";
  left: -22px;
  top: -20px;
  height: 0px;
  width: 0px;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-top: 21px solid black;
  z-index: -1;
}

オプション 2:要素を回転させ (三角形を生成するための境界ハックがあります)、それに a を追加box-shadowします。

.arrow-down {
  width: 0;
  height: 0;
  margin: 10px;
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #ccc;
  -ms-transform: rotate(225deg);  /* IE 9 */
  -webkit-transform: rotate(225deg);  /* Chrome, Safari, Opera */
  -moz-transform: rotate(225deg);
  transform: rotate(225deg);
  box-shadow: 0px -3px 0px -1px #444;
}
<div class="arrow-down"></div>

.arrow-down {
  width: 0;
  height: 0;
  margin: 10px;
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #ccc;
  transform: rotate(225deg); /* browser prefixes added in snippet */
  box-shadow: 0px -3px 0px -1px #444;
}

Chrome v24 および Safari v5.1.7 でテスト済み。他の CSS3 互換ブラウザでも動作するはずです。

次のオプションは、境界線内の境界線を作成しないため、質問に直接答えることはありませんが、境界線のある矢印/三角形を作成する別の方法です。

オプション 3:要素に線形グラデーションを使用し、それを回転して三角形を生成し、通常の境界プロパティを使用して境界線を追加します。

.arrow-down {
  width: 30px;
  height: 30px;
  margin: 10px;
  border-left: 2px solid #444;
  background: -webkit-linear-gradient(45deg, #ccc 50%, transparent 50%);
  background: -moz-linear-gradient(45deg, #ccc 50%, transparent 50%);
  background: -o-linear-gradient(45deg, #ccc 50%, transparent 50%);
  background: linear-gradient(45deg, #ccc 50%, transparent 50%);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-backface-visibility:hidden; /** <-- to prevent diagonal line aliasing in chrome **/
}
<div class="arrow-down"></div>

.arrow-down {
  width: 30px;
  height: 30px;
  margin: 10px;
  border-left: 2px solid #444;
  background: linear-gradient(45deg, #ccc 50%, transparent 50%);
  transform: rotate(-45deg);
  backface-visibility:hidden;
}

オプション 4:回転した疑似要素 (背景が三角形の色) を使用して三角形を生成し、通常の境界線を追加します。親要素のオーバーフローは非表示に設定され、疑似要素は適切に配置され、その半分だけが表示されます (三角形の錯覚を作成します)。

.arrow-down {
  position: relative;
  height: 50px;
  width: 50px;
  overflow: hidden;
}
.arrow-down:before {
  position: absolute;
  content: '';
  top: -webkit-calc(100% * -1.414 / 2);
  top: calc(100% * -1.414 / 2);
  left: 0px;
  height: 100%;
  width: 100%;
  background: #CCC;
  border-left: 2px solid #444;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
<div class="arrow-down"></div>

.arrow-down:before {
  position: absolute;
  content: '';
  top: calc(100% * -1.414 / 2);
  left: 0px;
  height: 100%;
  width: 100%;
  background: #CCC;
  border-left: 2px solid #444;
  transform: rotate(-45deg);
}
于 2013-08-05T12:28:31.303 に答える
2

次の行を CSS に追加してみてください。

.arrow-down:before {
    content: "";
    display: block;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-top: 26px solid #0f0;
    position: relative;
        left: -26px;
        top: -20px;
    z-index: -1;
}

これにより、3px の緑色の境界線が描画されます。

ここで結果を確認してください: jsfiddle

于 2013-08-05T12:27:42.447 に答える