CSSのみで三角形を作成する

スナジーヘルス

レスポンシブWebアプリケーションを開発していますが、次のように2つの個別のコンテンツ領域を作成する必要があります。 参照画像

これまでのところ、私は試しました、

border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c; 
height: 100%;
width: 100%;
position: fixed;

しかし、残念ながら三角形を作成することはできませんでした。

borderプロパティを使用する以外に、CSSを使用してコンテンツをdiv内で完全にラップする可能性のある三角形を作成する他の方法はありますか?

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

ハリー

境界線があり、その間に透明なカットがある三角形(既存の回答では対処されていないようです)を探していると思います。そのため、ここに例を示します。で達成することは絶対に可能ですが、多くのハッキングが必要です。

CSS変換の使用:

以下のスニペットは、疑似要素と変換を使用して三角形の効果を生成します。出力は応答性がありますが、スキュー変換を使用すると、コンテナの形状が長方形になった場合、スキュー角度を変更し、配置属性な​​どをさらに調整する必要があります。

.container {
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 200px;
}
.div-1,
.div-2 {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.div-1 {
  top: calc(-100% - 5px);
  transform: skewY(45deg);
  transform-origin: left top;
  border-bottom: 2px solid;
}
.div-1:after {
  position: absolute;
  content: '';
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  top: calc(100% + 7px);
  left: 0px;
  transform: skewY(-45deg);
  transform-origin: left top;
  border: 1px solid;
}
.div-2 {
  top: 5px;
  transform: skewY(45deg);
  transform-origin: left bottom;
  border-top: 1px solid;
}
.div-2:after {
  position: absolute;
  content: '';
  height: calc(100% - 7px);
  width: calc(100% - 7px);
  top: 0px;
  left: 0px;
  transform: skewY(-45deg);
  transform-origin: left bottom;
  border: 1px solid;
}
* {
  box-sizing: border-box;
}

/* just for demo */
.container{
  transition: all 1s;
}
.container:hover{
  width: 400px;
  height: 400px;
}
body{
  background: radial-gradient(circle at center, aliceblue, mediumslateblue);
  min-height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
  <div class='div-1'></div>
  <div class='div-2'></div>
</div>


グラデーションの使用:

別のアプローチは、以下のスニペットのように、背景画像としていくつかの線形グラデーションを使用することです。しかし、ここにも多くの欠点があります。(1)現在、グラデーションのブラウザサポートは非​​常に貧弱です。(2)角度のグラデーションは、スムージングが必要なギザギザの線を生成する傾向があります。(3)問題の画像で2つのdiv要素について具体的に言及しましたが、それらの中にコンテンツが必要だと思います。その場合、追加の作業が必要になります。

.container {
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 300px;
  background: linear-gradient(to top right, transparent calc(50% + 2px), black calc(50% + 2px), black calc(50% + 4px), transparent calc(50% + 4px)), linear-gradient(to bottom left, transparent calc(50% + 2px), black calc(50% + 2px), black calc(50% + 4px), transparent calc(50% + 4px)) ;
    }
.container:before{
  position: absolute;
  content: '';
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  left: 4px;
  border-top: 2px solid black;
  border-right: 2px solid black;
}
.container:after{
  position: absolute;
  content: '';
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  top: 4px;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}
/* just for demo */
.container{
  transition: all 1s;
}
.container:hover{
  width: 700px;
  height: 400px;
}
body{
  background: radial-gradient(circle at center, aliceblue, mediumslateblue);
  min-height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
</div>


SVGの使用:

これらすべてが私の提案につながります。それは、そのような形状を作成するためにSVG使用することです。それらはpath、要素だけを使用して簡単に作成でき、保守が容易で、本質的に応答性があります。

.container {
  position: relative;
  height: 300px;
  width: 200px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
svg path {
  fill: transparent;
  stroke: black;
}
/* just for demo */

.container {
  transition: all 1s;
}
.container:hover {
  height: 400px;
  width: 700px;
}
body {
  background: radial-gradient(circle at center, aliceblue, mediumslateblue);
  min-height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M4,2 L98,2 98,96 4,2z M2,4 L2,98 96,98 2,4z' vector-effect='non-scaling-stroke' />
  </svg>
</div>

注:上記のアプローチ(または他の回答で与えられたアプローチ)のいずれかを使用すると、コンテンツをこれらの三角形の境界内にとどめることはできません。それらの上にテキストを配置することはできますが、CSS Shapesモジュールのshape-insideプロパティが完全に実装されていない限り、テキストをこれらの境界内に含めることはできません

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

cssで中空三角形を作成する方法

分類Dev

CSSで三角形マーカーを作成する

分類Dev

CSSで曲線の三角形の円弧を作成する

分類Dev

三角形の先端でQlabelを作成する方法

分類Dev

三角形を別の三角形に変換する

分類Dev

背景画像の上に透明なCSS三角形を作成する

分類Dev

背景画像の上に透明なCSS三角形を作成する

分類Dev

CSSのみを使用して三角形のアニメーションを作成する方法

分類Dev

再帰で直角三角形を作成する

分類Dev

UIButtonで三角形を作成する

分類Dev

三角形のUIImageを作成する方法

分類Dev

三角形のdivを作成する方法は?

分類Dev

Pythonで反転方向に中空の三角形を作成する

分類Dev

三角形のスプライトでSKPhysicsBodyを作成する

分類Dev

cssのみを使用して三角形のdivを作成するにはどうすればよいですか?

分類Dev

角が丸い三角形を作成するためのSVGパス

分類Dev

三角形が不等辺三角形、二等辺三角形、正三角形、または三角形でないかどうかをチェックするJAVAプログラム

分類Dev

三角形の周囲と三角形の面積を計算する方法(三角形の内側)

分類Dev

SVG三角形を作成する

分類Dev

文字列から半三角形を作成する

分類Dev

境界線のある三角形のdivを作成する

分類Dev

頂点を接続してPythonで三角形を作成する

分類Dev

2つの三角形でひし形を定義する

分類Dev

CSS三角形に境界線を追加する

分類Dev

CSSだけで丸みを帯びた三角形を作ることは可能ですか?

分類Dev

C3で二等辺三角形を作成する

分類Dev

別の要素の下のcssに三角形を追加する

分類Dev

2つの色の間で遷移するCSS三角形

分類Dev

再帰のみを使用して星から三角形を作成する

Related 関連記事

  1. 1

    cssで中空三角形を作成する方法

  2. 2

    CSSで三角形マーカーを作成する

  3. 3

    CSSで曲線の三角形の円弧を作成する

  4. 4

    三角形の先端でQlabelを作成する方法

  5. 5

    三角形を別の三角形に変換する

  6. 6

    背景画像の上に透明なCSS三角形を作成する

  7. 7

    背景画像の上に透明なCSS三角形を作成する

  8. 8

    CSSのみを使用して三角形のアニメーションを作成する方法

  9. 9

    再帰で直角三角形を作成する

  10. 10

    UIButtonで三角形を作成する

  11. 11

    三角形のUIImageを作成する方法

  12. 12

    三角形のdivを作成する方法は?

  13. 13

    Pythonで反転方向に中空の三角形を作成する

  14. 14

    三角形のスプライトでSKPhysicsBodyを作成する

  15. 15

    cssのみを使用して三角形のdivを作成するにはどうすればよいですか?

  16. 16

    角が丸い三角形を作成するためのSVGパス

  17. 17

    三角形が不等辺三角形、二等辺三角形、正三角形、または三角形でないかどうかをチェックするJAVAプログラム

  18. 18

    三角形の周囲と三角形の面積を計算する方法(三角形の内側)

  19. 19

    SVG三角形を作成する

  20. 20

    文字列から半三角形を作成する

  21. 21

    境界線のある三角形のdivを作成する

  22. 22

    頂点を接続してPythonで三角形を作成する

  23. 23

    2つの三角形でひし形を定義する

  24. 24

    CSS三角形に境界線を追加する

  25. 25

    CSSだけで丸みを帯びた三角形を作ることは可能ですか?

  26. 26

    C3で二等辺三角形を作成する

  27. 27

    別の要素の下のcssに三角形を追加する

  28. 28

    2つの色の間で遷移するCSS三角形

  29. 29

    再帰のみを使用して星から三角形を作成する

ホットタグ

アーカイブ