コピペOK!　枠線の指定

今回は

です。

.border_round {
	border-radius: 50%;
	width: 300px;
	height: 300px;
	padding: 120px 90px;
}

.triangle_frame01 {
	width: 100px;
	height: 100px;
	border-top: 20px solid #F0897F;
	border-right: 20px solid #f6da69;
	border-bottom: 20px solid #b2ce54;
	border-left: 20px solid #6aa7cd;
}

border-top 、border-bottom 、border-left 、border-right を色を変えて設定しています。
それぞれの線の境目が斜めになっていますね。

この空白部分をなくすと……
（ボーダーを太くする）

.triangle_frame02 {
	width: 100px;
	height: 100px;
	border-top: 50px solid #F0897F;
	border-right: 50px solid #f6da69;
	border-bottom: 50px solid #b2ce54;
	border-left: 50px solid #6aa7cd;
}

100pxの幅（width）を半分ずつ border-left と border-right を 50px に設定し、100pxの高さ（height）を border-top と border-bottom で半分に分け 50px に設定しています。

４とおりの三角ができました。

border-top 、border-bottom 、border-left 、border-right のうち３つを透明にしてみます。

.triangle_top {
	width: 100px;
	height: 100px;
	border-top: 50px solid #F0897F;
	border-right: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid transparent;
}

下向きの三角ができました。

border_top 以外の色をtransparent （透明）に設定しています。

.triangle_top {
	width: 100px;
	height: 100px;
        border: 50px solid transparent;
	border-top: 50px solid #F0897F;
}

.triangle_bottom {
	width: 100px;
	height: 100px;
	border: 50px solid transparent;
	border-bottom: 50px solid #b2ce54;
}

.triangle_left {
	width: 100px;
	height: 100px;
	border: 50px solid transparent;
	border-left: 50px solid #6aa7cd;
}

.triangle_right {
	width: 100px;
	height: 100px;
	border: 50px solid transparent;
	border-right: 50px solid #f6da69;
}

当ブログの次回予告部分です。

このような吹き出し風のラインを引くこともできます。

.next_jump {
    padding: 0px 15px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    background: #ffffe0;
    border: 3px solid #008000;
    border-radius: 20px;
}
.next_jump::before {
    content: "";
    position: absolute;
    top: 100%;
    right: 9%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #008000;
}

上記の左側の吹き出しの設定です。

まずテキスト部分の四角を設定します。
next_jump で本体の四角の設定をしています。
position: relative;
display: inline-block; はこのまま使います。
padding や margin 、background 、 border の色やborder-radius は適宜設定してください。
ラインだけ引きたくて背景色は付けない場合はbackground を設定しません。

.next_jump::before で吹き出し部分の三角を設定しています。この三角を本体にくっつけて吹き出し風に見せているんですね。
content: “";
position: absolute; はこのまま使います。
content: “"; を設定しないとbefore 要素が機能しなくなります。
top 、right で三角をくっつける場所を設定します。場合によっては bottom、left を設定します。
border と border-top で三角の大きさを設定します。ここの色がラインの色になります。（緑色ですね。#008000）

いろいろ試して調整してみてください。

.next_jump::after {
    content: "";
    position: absolute;
    top: 98%;
    right: 10.3%;
    border: 14.7px solid transparent;
    border-top: 14.7px solid #ffffe0;
}

次にクリーム色の三角部分の設定です。

疑似要素の after で設定します。
position: relative;
display: inline-block; はこのまま使います。
border 、 border-top の太さが before 要素よりやや小さい数値になっています。border-top の色はbackground と同じ色ですね。background を設定していない場合（無色）は カラーコードの代わりに transparent を設定します。
これでbefore の緑色の三角がはみ出してラインのように見えるようになります。

いろいろ試して調整してみてください。