ga-05-I3

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
ボーダーによる 三角形の作り方

当ホームページのトップに戻るボタンとページ移動ボタンの三角形はボーダーによって作られています。

<ステップ1>
太い線のボーダーを作り、上下左右のボーダーの色を変えます。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
 ボーダーを使った三角形の作り方(ステップ1)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <div class="d-center">
        <p class="delta">
        </p>
    </div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
 ボーダーで三角形を作る step1
--====================================*/
.delta{
  width: 200px;
  height:200px;
  margin: 30px auto;      
  border-top: 20px solid red;
  border-right: 20px solid green;
  border-bottom: 20px solid darkblue;
  border-left: 20px solid cyan;
}
        

<ステップ2>
ボーダーの幅と高さをZEROに変更します。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
 ボーダーを使った三角形の作り方(ステップ2)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-2.css">
</head>
<body>
    <div class="d-center">
        <p class="delta">
        </p>
    </div>
</body>
</html>
        
CSSコード(style-2.css)
@charset "utf-8";
/*--====================================
   CSSで三角形を作る step2
--====================================*/
.delta{
  width: 0px;
  height:0px;
  margin: 30px auto;   
  border-top: 20px solid red;
  border-right: 20px solid green;
  border-bottom: 20px solid darkblue;
  border-left: 20px solid cyan;
}
        

<ステップ3>
必要の無い三角形を透明にします。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
 ボーダーを使った三角形の作り方(ステップ3)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-3.css">
</head>
<body>
    <div class="d-center">
        <p class="delta">
        </p>
    </div>
</body>
</html>
        
CSSコード(style-2.css)
@charset "utf-8";
/*--====================================
   ボーダーで三角形を作る step3
--====================================*/
.delta{
  width: 0px;
  height:0px;
  margin: 30px auto;
  border:20px solid transparent;
  border-bottom:20px solid darkblue;
}
        

transparent : 透明にする

 back
pagetop
 next

ボーダーの活用2
(コメントボックス)

ボーダーによる
三角形の作り方

絶対パスと
相対パスの使い方

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken