ボックスの左下隅に非対称の三角形を作成するにはどうすればよいですか？
user3142695
左下隅に矢印の付いたボックスを作成する必要があります。私の問題は、非対称の三角形を取得することです。
左下隅に三角形があるボックスの下の境界線の例を次に示します。
これはこれまでの私の試みです：
.box {
width: 150px;
height: 75px;
background-color: black;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.box.arrow-bottom:after {
content: " ";
position: absolute;
left: 0px;
bottom: -15px;
border-top: 15px solid black;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: none;
}<div class="box arrow-bottom">
This is a box with some content and an arrow at the bottom.
</div> DSCH
境界線の幅を少し編集して、を追加しましたtransform: skewX()。あなたはスキューのために適切な量で遊ぶかもしれません。さらに、に:after変更され:before、leftプロパティで遊んで、を削除しましたright。
それが役に立てば幸い：
.box {
width: 150px;
height: 75px;
background-color: black;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.box.arrow-bottom:before {
content: " ";
position: absolute;
left: 8px;
bottom: -15px;
border-top: 15px solid black;
border-right: 0px solid transparent;
border-left: 15px solid transparent;
border-bottom: none;
transform: skewX(20deg);
}<div class="box arrow-bottom">
This is a box with some content and an arrow at the bottom.
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
- 前の投稿：条件* First1 == * First2ではないのはなぜですか？（C ++ STLには関数実装が含まれています）
- 次の投稿：Tagbar plugin works in vim but not neovim
関連記事
Related 関連記事
- 1
三角形の内側に境界線を作成するにはどうすればよいですか？
- 2
下部に全幅の三角形を作成するにはどうすればよいですか？
- 3
三角形のQWidgetを作成するにはどうすればよいですか？
- 4
三角形の位置を計算して作成するにはどうすればよいですか？
- 5
html、svgを使用してクリック可能な三角形のグリッドを作成するにはどうすればよいですか？
- 6
def関数なしでアスタリスク付きの直角三角形を作成するにはどうすればよいですか？
- 7
6つの三角形のSCNNodeで六角形を作成するにはどうすればよいですか？
- 8
6つの三角形のSCNNodeで六角形を作成するにはどうすればよいですか？
- 9
6つの三角形のSCNNodeで六角形を作成するにはどうすればよいですか？
- 10
6つの三角形のSCNNodeで六角形を作成するにはどうすればよいですか？
- 11
配列を特定の三角形に印刷するにはどうすればよいですか？
- 12
下の三角形だけをggpairsで表示するにはどうすればよいですか？
- 13
2の累乗を三角形で印刷するにはどうすればよいですか？
- 14
正三角形の座標を計算するにはどうすればよいですか？
- 15
正三角形の座標を計算するにはどうすればよいですか？
- 16
親divの高さにスケーリングするCSSで三角形を作成するにはどうすればよいですか？
- 17
対角線上にある2つのcss不等辺三角形の間の線を削除するにはどうすればよいですか？
- 18
CSSリボンメニューで右側の三角形を作成するにはどうすればよいですか？
- 19
UWPで三角形ボタンを実行するにはどうすればよいですか？
- 20
JavaFXを使用して三角形を作成するにはどうすればよいですか？
- 21
pygameで三角形の中点を見つけて、それを繰り返し実行してシェルピンスキーの三角形を作成するにはどうすればよいですか？
- 22
C ++：パスカルの三角形の「n番目」の行を作成するにはどうすればよいですか？
- 23
divに直角三角形のカットを作成するにはどうすればよいですか？
- 24
SQLのストアドプロシージャを使用して星の三角形を作成するにはどうすればよいですか？
- 25
Pythonで上三角形と下三角形の2つのベクトルから相関行列を作成するにはどうすればよいですか？
- 26
三角形の穴パッチをサーフェスメッシュに変換するにはどうすればよいですか？
- 27
右の境界線としてレスポンシブ三角形を作成するにはどうすればよいですか？
- 28
三角形の両側の画像（任意のテクスチャ）を変更するにはどうすればよいですか？
- 29
線形勾配から必要なサイズの三角形を作成するにはどうすればよいですか？
コメントを追加