html - CSSで三角形を作る方法

Question

私はこの問題を抱えています。私はデザイン担当者ではありません。長方形の下にこの矢印を作成する方法がわかりません：

この背景色でdivを作成し、その下に画像を掛けようとしましたが、これを2時間実行しようとしていますが、三角形に切り取る画像ツールが見つからないことに完全に行き詰まっています. それから私はcssを介してこれを行うことにしましたが、どういうわけかそれを行うことはできません.

css でこの三角形を作成し、div にハングアップするにはどうすればよいですか? ウィンドウのサイズを変更すると、三角形がdivにくっついて移動しないようにしたいです。

事前に助けてくれてありがとう。

Answer 1

デモ

HTML

<div class="arrow-down"></div>

CSS

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

更新されたデモ

HTML

<div id="div1"><div class="arrow-down"></div></div>

CSS

#div1{
    width:200px;
    height:200px;
    background-color:#f00;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    position:absolute; //added position:absolute
}

js

$(document).ready(function () {
    $('.arrow-down').css('top', $('#div1').height() + 5).css('left', '20px');
});

:afterまたは、 css効果のみを利用できます

デモ

HTML

<div>
    <p>Testing triangle</p>
</div>

CSS

div {
    margin: 50px;
    padding: 10px 20px;
    float: left;
    background-color: #f00;
    position: relative;
}
div:after {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    content:"";
    position: absolute;
    bottom: -20px;
    left: 20px;
}