Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

CSSを使用したHTMLのDivの下部にある中央の三角形

divの中央と下部に三角形を設定するには、次を使用します。左を50％に設定する必要があります-

.demo: after {
   position: absolute;
   border-top: solid 50px #e15915;
   border-left: solid 50px transparent;
   border-right: solid 50px transparent;
   top: 100%;
   left: 50%;
   margin-left: -50px;
   width: 0;
   height: 0;
}

  1. フレックスボックスを使用した高度なCSSレイアウト

    CSS3は、一般にFlexboxと呼ばれるレイアウトモードのFlexibleBoxを提供します。 Flexbox（フレキシブルボックス）はCSS3のレイアウトモードです。このモードを使用すると、複雑なアプリケーションやWebページのレイアウトを簡単に作成できます。コンテナ、フレックスアイテムなどが含まれます。コンテナには次のプロパティがあります- フレックス方向 フレックスラップ フレックスフロー justify-content 整列アイテム align-content 以下は、flexboxを使用した高度なCSSレイアウトのコードです- 例 &l

  2. 純粋なCSSによるスムーズなスクロール

    CSSのscroll-behaviorプロパティを使用すると、スクロールの動作を変更できます。 例 次の例は、CSSのscroll-behaviorプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> html {    line-height: 200px;    margin: 30px;    text-align: center;    vertical-align: middle; } #parent {