■ CSSで四角形を描くには... / width・height・background-color

サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 四角形 */
.square {
 width: 100px;
 height: 200px;
 background-color: #ff9800;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>

■ CSSで丸/丸角/二重丸を描くには... / border-radius・box-shadow

* 丸を描く

 => border-radius: 50%

* 丸角を描く

 => border-radius: XX%

* 二重丸を描く

 => box-shadow: 0 0 0 Xpx #XXXXX

サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 円 */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff9800;
}
/* 丸角 */
.rounded-corners {
  width: 100px;
  height: 100px;
  border-radius: 15%;
  background-color: #ff9800;
}
/* 二重丸を描く */
.double-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #ff5800;
  background-color: #ff9800;
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="rounded-corners"></div>
<div class="double-circle"></div>
</body>
</html>

■ CSSで三角形を描くには... / border

 * 三角形を描く
  => borderプロパティを使う

サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 三角形 */

.triangle-1 {
 width: 0px ;
 height: 0px ;
 border: 50px solid transparent; /* 透明 */
 border-bottom-color: #ff9800; /* 上向きの場合 */
}
.triangle-2 {
 width: 0px ;
 height: 0px ;
 border: 50px solid transparent;
 border-top-color: #ff9800; /* 下向きの場合 */
}
.triangle-3 {
 width: 0px ;
 height: 0px ;
 border: 50px solid transparent;
 border-left-color: #ff9800; /* 右向きの場合 */
}
.triangle-4 {
 width: 0px ;
 height: 0px ;
 border: 50px solid transparent;
 border-right-color: #ff9800; /* 左向きの場合 */
}
</style>
</head>
<body>
<div class="triangle-1"></div>
<hr>
<div class="triangle-2"></div>
<hr>
<div class="triangle-3"></div>
<hr>
<div class="triangle-4"></div>
</body>
</html>

補足

 * borderの境界線が斜めになることを利用して三角形を表現する

参考

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
.sample1 {
 width: 100px;
 height: 100px;
 border-style: solid;
 border-width: 20px;
 border-color: red blue orange green;
}
.sample2 {
 width: 0; /* 0にした */
 height: 0; /* 0にした */
 border-style: solid;
 border-width: 20px;
 border-color: red blue orange green;
}
</style>
</head>
<body>
<div class="sample1"></div>
<div class="sample2"></div>
↑三角形が四つできる
</body>
</html>

参考文献

https://www.granfairs.com/blog/staff/make-triangle-with-css

【応用】CSSで吹き出しを作るには...

 * 円・と三角形の組み合わせで、吹き出しを表示する

サンプル

例１：オレンジ色(#ff9800)の吹き出し

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 吹き出しの本体 */
.balloon {
 /* 表示位置 */
 top: 30px;
 left: 30px;
 /* 吹き出し内容の表示範囲 */
 width: 200px;
 height: 100px;
 background: #ff9800;
 /* 丸角 */
 border-radius: 15px;
 /* 文字色：白 */
 color: #fff;
 /* 文字：中央 */
 display: flex;
 align-items: center;
 justify-content: center;
 /* ★必要★ */
 position: relative;
}

/* 吹き出しの三角形部分(下向きの吹き出し) */
.balloon:before{
 position: absolute;
 /* 表示位置調整 */
 right: 20px;
 bottom: -20px;
 content: "";
 /* 三角形 */
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 10px;
 /* 三角形向き調整 */
 border-color: #ff9800 transparent transparent transparent;
}
</style>
</head>
<body>
<div class="balloon">
  <p>はろーわーるど</p>
</div>
</body>
</html>

例２：オレンジ枠線・白い（#fff）の吹き出し

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 吹き出しの本体 */
.balloon {
 /* 表示位置 */
 top: 30px;
 left: 30px;
 /* 吹き出し内容の表示範囲 */
 width: 200px;
 height: 100px;
 /* background: #ff9800; ★変更(削除)★ */
 border: 1px solid #ff9800; /* ★変更★ */
 /* 丸角 */
 border-radius: 15px;
 /* 文字色：オレンジ */
 color: #ff9800;
 /* 文字：中央 */
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
}

/* 吹き出しの三角形部分(下向きの吹き出し) */
.balloon:before{
 position: absolute;
 /* 表示位置調整 */
 right: 20px;
 bottom: -20px;
 content: "";
 /* 三角形 */
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 10px;
 /* 三角形向き調整 */
 border-color: #ff9800 transparent transparent transparent;
}

/* 吹き出しの三角形部分(白い三角形(#fff)を重ねる) ★変更★ */
.balloon:after{
 position: absolute;
 /* 表示位置調整 */
 right: 20px;
 bottom: -19px; /* ★変更★ 1pxずらす */
 content: "";
 /* 三角形 */
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 10px;
 /* 三角形向き調整 */
 border-color: #fff transparent transparent transparent; /* ★変更★ 白い三角形(#fff)を重ねる */
}
</style>
</head>
<body>
<div class="balloon">
  <p>はろーわーるど</p>
</div>
</body>
</html>

例３：グレー枠線・白い（#fff）の吹き出し（別解）

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 吹き出しの本体 */
.balloon {
 /* 表示位置 */
 top: 30px;
 left: 30px;
 /* 吹き出し内容の表示範囲 */
 width: 200px;
 height: 100px;
 /* background: #ccc; ★変更(削除)★ */
 border: 1px solid #ccc; /* ★変更★ */
 /* 丸角 */
 border-radius: 15px;
 /* 文字色：黒 */
 color: #000;
 /* 文字：中央 */
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
}

/* 吹き出しの三角形部分(上向きの吹き出し) */
.balloon:before{
 position: absolute;
 /* 表示位置調整 */
 left: 20px;
 top: -15px;
 content: "";
 /* 三角形 */
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 10px;
 /* 三角形向き調整 */
 border-top: 0 solid #ccc;
 border-left: 15px solid transparent;
 border-right: 15px solid transparent;
 border-bottom: 15px solid #ccc;
}

/* 吹き出しの三角形部分(白い三角形(#fff)を重ねる) ★変更★ */
.balloon:after{
 position: absolute;
 /* 表示位置調整 */
 left: 21px;
 top: -14px; /* ★変更★ 1pxずらす */
 content: "";
 /* 三角形 */
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 10px;
 /* 三角形向き調整 */
 border-top: 0 solid #fff;
 border-left: 14px solid transparent;
 border-right: 14px solid transparent;
 border-bottom: 14px solid #fff;
}
</style>
</head>
<body>
<div class="balloon">
  <p>はろーわーるど</p>
</div>
</body>
</html>