私は、この特定のdiv形状を作成したいCSS

Question

における具体的な事業部の形状を作成します。そのような形を描くのを手伝ったり、私のウェブを本当にうまく説明するウェブにリダイレクトしたりできますか？ありがとう、

Answer 1

アイデアは幅と高さがゼロのボックスです。矢印の実際の幅と高さは、境界の幅によって決まります。 ​​ウェブサイトには、小さなアニメーションのチュートリアルがあります

Answer 2

あなたはそれが好きで設計することができます：

HTML：：

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

CSS：あなたがすることによってこれを達成することができます

.rect { 
 
      background: black; 
 
      height: 50px; 
 
      width: 150px; 
 
      position: relative; 
 
      overflow: hidden; 
 
     } 
 
     .rect:after { 
 
      content: ""; 
 
      background: #ffffff; 
 
      height: 50px; 
 
      width: 50px; 
 
      -moz-transform: rotate(45deg); 
 
      -ms-transform: rotate(45deg); 
 
      -webkit-transform: rotate(180deg); 
 
      -o-transform: rotate(180deg); 
 
      transform: rotate(45deg); 
 
      display: block; 
 
      position: absolute; 
 
      top:-35px; 
 
      right: 50px; 
 
      
 
     }

<div class="rect"></div>

Answer 3

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

    border-top: 20px solid #fff; 
    position:absolute; 
    top:0; 
    left:50%; 
} 

.block{ 
    background-color:black; 
    height: 200px; 
    position:relative; 
}