My Vector Space

人生は寄り道してなんぼ

CSSで作るリボン風の見出し

 

CSSでリボンを作るまでの大まかな流れ~

 

まず、リボン風にしたい部分の要素をhtmlに設定。

そこにスタイルを適用させ、borderプロパティでリボンの影に見せる部分の三角形を作成し

positionプロパティで位置の調整をしていく、という流れ。

 

まずは、htmlから

 【 html 】
 1
  <div class="sample1">
 2
      サンプルテキスト サンプルテキスト
 3
  </div>

 

次に、CSSのコーディングをしていく

 【 CSS 】
 1
  .sample1{
 2
      position: relative;
 3
      color: #ffffff ;
 4
      background: #1A1A1A;
 5
      font-size: 15px ;
 6
     line-height: 1;
 7
     margin: 15px 65px 20px -12px;
 8
     padding: 7px 20px 5px 20px;
 9
     box-shadow:1px 1px 3px 0px  #666666 ;
 10
   }
 11
  .sample1:before {
 12
      content: "";
 13
      position: absolute;
 14
      top: 100%;
 15
      height: 0;
 16
      width: 0;
 17
      border: 5px solid transparent;
 18
      border-top: 5px solid #484641;
 19
   }
 20
  .sample1:after{
 21
      left: 0;
 22
      border-right: 5px solid #484641;
 23
    }
 24
  .sample1:before{
 25
      visibility:hidden;
 26
    }
 27
 
PAGE TOP