html - HTML / CSSで斜めの境界線は可能ですか?

Question

私はまだこれを見ていないことに気づきました。

しかし、それが不可能だとは信じられません。

純粋な CSS/HTML で三角形を描画しようとしています。できれば等辺。

説明:

これを達成するために画像を使用したくありません。

div 内にコンテンツを配置できる必要があります。

score 6 · Accepted Answer

ワンソリューション

対角線は簡単ではありません。1 つの解決策は、無地の背景色を扱っていると仮定して、疑似要素をオーバーレイして境界線を作成することです。次に、見栄えがよくなるようにコンテンツを配置する必要があります。テキストの折り返しを行うこともできます。

このコードを使用した基本的な例を次に示します。

CSS と HTML それぞれ

.triangleBorder {
        position: relative;
        width: 200px;
        height: 173.2px; /* for equalateral = Width * (sq.root 3) / 2 */
    }
    
    .triangleBorder:before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        z-index: -2;
        border: 100px solid transparent;
        border-top-width: 0;
        border-bottom: 173.2px solid black;
    }
    
    .triangleBorder:after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        left: 1px;
        top: 1px;
        z-index: -1;
        border: 99px solid transparent;
        border-top-width: 0;
        border-bottom: 171.5px solid white;
    }
    
    .triangleBorder span {
       position: absolute;
       width: 100%;
       text-align: center;
       top: 50%;
    }

<div class="triangleBorder">
    <span>Content<span>
</div>

score 5 · Accepted Answer

CSS を使用して正三角形を作成するためのいくつかの異なるアプローチを次に示します。対角線の作成はまだ簡単ではありませんが、ボディの背景にグラデーション (または) 画像がある場合でも、少なくとも形状の背景を透明にすることができます。

オプション 1:疑似要素とスキュー変換を使用する

この方法では、いくつかの疑似要素を使用し、それらを反対方向 (内側) に傾斜させて対角線を作成しますが、下部の線border-bottomは親のを使用して生成されます。このアプローチを使用して台形を作成することもできます。

短所:body背景とshape背景が異なり、body背景が単色でない場合、このアプローチは機能しません。

.triangle {
  position: relative;
  width: 200px;
  border-bottom: 2px solid white;
  color: white;
  margin: 20px auto;
  overflow: hidden;
}
.shape1 {
  height: 174px;
}
.shape2 {
  height: 101px;
}
.triangle:before,
.triangle:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 0%;
  bottom: 0px;
  transform-origin: left bottom;
}
.triangle:before {
  left: 0px;
  border-right: 2px solid white;
}
.triangle.shape1:before {
  transform: skew(-30deg);
}
.triangle.shape2:before {
  transform: skew(-45deg);
}
.triangle:after {
  right: 0px;
  border-left: 2px solid white;
}
.triangle.shape1:after {
  transform: skew(30deg);
}
.triangle.shape2:after {
  transform: skew(45deg);
}
.triangle span {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
}

/* Just for demo */

*{
  box-sizing: border-box;
}

body {
  background: radial-gradient(ellipse at center, #400, #100);
}
.trapezoid {
  position: relative;
  border-bottom: 2px solid white;
  color: white;
  margin: 20px auto;
  width: 200px;
  height: 50px;
}
.trapezoid:before,
.trapezoid:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 40%;
  bottom: -1px;
  border-top: 2px solid white;
  transform-origin: left bottom;
}
.trapezoid:before {
  left: 0px;
  border-left: 2px solid white;
  transform: skew(-45deg);
}
.trapezoid:after {
  right: 0px;
  border-right: 2px solid white;
  transform: skew(45deg);
}
.trapezoid span {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 30%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class='triangle shape1'>
  <span>content</span>
</div>
<div class='triangle shape2'>
  <span>content</span>
</div>

<br/>


<!-- Just something extra to illustrate -->

<div class='trapezoid'>
  <span>content</span>
</div>

<br/>

これはオプション 1のバリエーションでbody、の背景と形状の背景が異なり、body背景が無地の場合に機能します。

.triangle{
  position: relative;
  width: 200px;  
  border-bottom: 2px solid black;
  color: red;
  background: beige;
  margin: 20px auto;
  overflow: hidden;
}
.shape1{
  height: 174px;
}
.shape2{
  height: 101px;
}
.triangle:before, .triangle:after{
  position: absolute;
  content: '';
  height: 101%;
  width: 100%;
  bottom: 0px;
  background: red;
  transform-origin: left bottom;
}
.triangle:before{
  left: -200px;
  border-right: 2px solid black;
}
.triangle.shape1:before{
  transform: skew(-30deg);  
}
.triangle.shape2:before{
  transform: skew(-45deg);  
}
.triangle:after{
  right: -200px;  
  border-left: 2px solid black;
}
.triangle.shape1:after{
  transform: skew(30deg);
}
.triangle.shape2:after{
  transform: skew(45deg);
}

.triangle span{
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
}

/* Just for demo */

*{
  box-sizing: border-box;
}
body{
  background: red;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle shape1'>
  <span>content</span>
</div>
<div class='triangle shape2'>
  <span>content</span>
</div>

これは、三角形の内側と外側の両方でグラデーションの背景をサポートするオプション 1 の別のバリエーションです。

.triangle {
  position: relative;
  width: 200px;
  border-bottom: 2px solid white;
  color: white;
  margin: 20px auto;
  overflow: hidden;
}
.shape1 {
  height: 174px;
}
.shape2 {
  height: 101px;
}
.triangle:before,
.triangle:after {
  position: absolute;
  content: '';
  height: 99%;
  width: 50%;
  z-index: -1;
  transform-origin: left bottom;
}
.triangle:before {
  left: 0px;
  top: 100%;
  border-top: 3px solid white;
  background: linear-gradient(90deg, #003333, #773333);
}
.triangle.shape1:before {
  border-top: 4px solid white;
  transform: skewY(-60deg);
}
.triangle.shape2:before {
  transform: skewY(-45deg);
}
.triangle:after {
  right: 0px;
  top: 0%;
  border-top: 3px solid white;
  background: linear-gradient(90deg, #773333, #FF3333);
}
.triangle.shape1:after {
  border-top: 4px solid white;
  transform: skewY(60deg);
}
.triangle.shape2:after {
  transform: skewY(45deg);
}
.triangle span {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
}


/* Just for demo */

*{
  box-sizing: border-box;
}
body {
  background: radial-gradient(ellipse at center, #400, #100);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle shape1'>
  <span>content</span>
</div>
<div class='triangle shape2'>
  <span>content</span>
</div>

スクリーンショット:

ここに画像の説明を入力

skew親の角度と高さを変更することで、さまざまな角度の三角形を簡単に作成できますdiv。しかし、私たちが使用しているskewので、スキュー角度が 90 度 (または -90 度) に近づくにつれてボーダーが細くなる傾向がありますが、それほど大きな問題にはなりません。

オプション 2:線形グラデーションを使用する

この方法では、斜めのlinear-gradient背景 (それぞれがコンテナーの 50% 幅) をいくつか使用し、それらを反対方向に傾けて対角線を作成します。

.triangle {
  position: relative;
  border-bottom: 2px solid white;
  color: white;
  margin: 20px auto;
  height: 174px;
  width: 200px;
  background: linear-gradient(to top left, transparent 49.5%, white 49.5%, white 50.5%, transparent 50.5%), linear-gradient(to top right, transparent 49.5%, white 49.5%, white 50.5%, transparent 50.5%);
  background-size: 50% 100%;
  background-position: 1px 0px, 99px 0px;
  background-repeat: no-repeat;
}
.triangle span {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
}
/* Just for demo*/

body {
  background: radial-gradient(ellipse at center, #400, #100);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle'>
  <span>content</span>
</div>

短所:斜めのグラデーションはギザギザの線を生成することで知られています。

注:どのアプローチを選択したかに関係なく、テキストをシェイプ内にとどめるためにテキストの折り返しを行う必要があります。

html - HTML / CSSで斜めの境界線は可能ですか?

2 に答える 2

ワンソリューション

Related

Reference