蛍光ペンで波線を入れたようなCSS見出しデザイン

text-decorationで下部に波線を入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 100vw; height: 100vh; padding: 0 6rem; box-sizing: border-box; background-color: #fefefe; } h2 { padding: 15px; color: #333; background-image: linear-gradient(white 0 100%), linear-gradient(-45deg, #333 0 15px, transparent 15px calc(100% - 15px), #333 calc(100% - 15px)); background-size: calc(100% - 2px) calc(100% - 2px), 100%; background-repeat: no-repeat; background-position: center center, center; text-decoration: 4px underline wavy #E056DB; text-underline-offset: -2px; font-weight: bold; font-size: 24px; text-align: center; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container"> <h2>上下に破線を引いた見出し</h2> </div> </body></html>

上下に少し太めの破線を入れたCSS見出しデザイン

text-decorationで上下に破線を入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 6rem; box-sizing: border-box; background-color: #fefefe; } h2 { padding: 15px; border-radius: 5px; border-left: 10px solid #333; border-right: 10px solid #333; background-color: #c5e7f3; color: #333; text-decoration: 3px overline underline dashed #333; text-underline-offset: 3px; font-weight: bold; font-size: 24px; text-align: center; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container"> <h2>上下に破線を引いた見出し</h2> </div> </body></html>

上下に斜めストライプを入れたCSS見出しデザイン

「repeating-linear-gradient」でストライプにし、「linear-gradient 」で上下を透過させてます。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { padding: 15px; border: 5px solid #333; background-image: linear-gradient(transparent 5px, #333 6px calc(100% - 6px), transparent calc(100% - 5px)), repeating-linear-gradient(45deg, white 0 5px, #333 5px 10px); color: white; font-size: 26px; font-weight: bold; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>上下にストライプを入れた見出し</h2> </div> </body></html>

左右に斜めストライプ入りのあしらいを入れたCSS見出しデザイン

「linear-gradient 」で罫線を入れ、「border-radius」で角丸に。「repeating-linear-gradient」でストライプにしています。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 3rem; box-sizing: border-box; background-color: #fefefe; } h2 { padding: 15px 20px; border: 5px solid #333; border-radius: 50px; background-image: linear-gradient(90deg, transparent 15px, #333 16px calc(100% - 16px), transparent calc(100% - 15px)), repeating-linear-gradient(45deg, #F3CC57, 2px, #9b8237 2px 4px); color: white; font-size: 26px; font-weight: bold; text-align:center; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>シンプルなあしらいを入れた見出し</h2> </div> </body></html>

左右にストライプ入りの三角形を入れたCSS見出しデザイン

「linear-gradient 」で三角形にして「repeating-linear-gradient」でストライプにしています。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 4rem; box-sizing: border-box; background-color: #fefefe; } h2 { padding: 15px; border: 5px solid #333; background-image: linear-gradient(45deg, transparent 15px, #333 16px calc(100% - 16px), transparent calc(100% - 15px)), repeating-linear-gradient(#97B7C4, 2px, #4f5f66 2px 4px); color: white; font-size: 26px; font-weight: bold; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>シンプルなあしらいを入れた見出し</h2> </div> </body></html>

左右に白い線を入れ角丸にしたCSS見出しデザイン

「border-left」「border-right」で太さの異なる境界線を入れ「border-radius」で角丸にしてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 6rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 15px 10px; border-radius: 50px; border-right: 1px solid; border-left: 5px solid; box-shadow: 0 0 0 3px #E77660, 0 0 5px 1px #000; background-color: #E77660; color: white; font-size: 26px; font-weight: bold; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>光沢感のある見出しデザイン</h2> </div> </body></html>

左右に白いラインを入れたCSS見出しデザイン

「border-radius」で角丸にして「border-left」「border-right」でラインを入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 3rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 10px; border-radius: 10px; border-left: 10px solid white; border-right: 10px solid white; box-shadow: 0 0 0 5px #CCE8DC; background-color: #CCE8DC; color: #333; font-size: 26px; font-weight: bold; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>左右を角丸にして白いラインを入れる</h2> </div> </body></html>

左上下を角丸にしたCSS見出しデザイン

「border-top-left-radius」「border-bottom-left-radius」で左上下を角丸にしています。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 4rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 10px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-right: 10px solid white; box-shadow: 0 0 0 5px #F6D9DE; background-color: #F6D9DE; color: #333; font-size: 26px; font-weight: bold; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>左を角丸にして右にラインを入れる</h2> </div> </body></html>

左上だけ角丸にしたCSS見出しデザイン

「border-top-left-radius」で左上だけ角丸にしています。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 6rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 10px; border-top-left-radius: 20px; border: 2px dashed; box-shadow: 0 0 0 5px #DEDACE; background-color: #DEDACE; color: #333; font-size: 26px; font-weight: bold; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>左上だけ角丸にした見出し</h2> </div> </body></html>

吹出口を破線にしたCSS見出しデザイン

before疑似要素の「border-left」で破線を入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 15px; border-radius: 5px; background-color: #eac988; color: #333; font-weight: bold; font-size: 26px; } h2:before { position: absolute; top: 100%; left: 30px; transform: rotate(20deg); border-left: 5px dotted #eac988; height: 20px; content: ""; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>吹出口を破線にしたデザイン</h2> </div> </body></html>

吹出口を線だけにしたCSS見出しデザイン

before疑似要素で実線を入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 15px; border-radius: 5px; border: 2px solid #333; background-color: #EB8694; color: #333; font-weight: bold; font-size: 26px; } h2:before { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 20px; width: 2px; background-color: #333; content: ""; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>吹出口を実線にしたデザイン</h2> </div> </body></html>

2つの円を下側に入れたCSS見出しデザイン

before、after疑似要素で円形要素を作り考え事をしているような吹き出しにしています。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 15px; border-radius: 30px; background-color: #9CC7CE; color: white; font-weight: bold; font-size: 26px; } h2:before, h2:after { position: absolute; border-radius: 50%; background-color: #9CC7CE; content: ""; } h2:before { top: 110%; left: 40px; height: 15px; width: 15px; } h2:after { top: 150%; left: 50px; height: 10px; width: 10px; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>下側に2つの円を入れた吹き出し</h2> </div> </body></html>

吹出口の右側だけ線を入れたCSS見出しデザイン

before疑似要素で「skew」を指定し線を斜めに、「border-right」で右側だけ実線を入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 3rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 15px; border: 3px solid #333; background-color: white; color: #333; font-weight: bold; font-size: 26px; } h2:before { position: absolute; top: 100%; left: 50px; transform: skew(-25deg); height: 15px; width: 15px; border-right: 3px solid #333; background-color: white; content: ""; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>吹出口の右側だけ線を入れたデザイン</h2> </div> </body></html>

内側に破線を入れたCSS見出しデザイン

before疑似要素でborder-topのみ塗りを入れて吹き出しを作ってます。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 10px; box-shadow: 0 0 0 7px #D3E7B4; border: 2px dashed #333; border-radius: 30px; background-color: #D3E7B4; color: #333; font-weight: bold; font-size: 26px; } h2:before { position: absolute; bottom: -28px; left: 30px; height: 0; width: 0; border-style: solid; border-color: transparent; border-top-color: #D3E7B4; border-width: 10px; content: ""; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>内側に破線を入れた吹き出し</h2> </div> </body></html>

丸枠の吹き出しにしたCSS見出しデザイン

before疑似要素でborder-topのみ黒塗りし吹き出しを作ってます。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 3rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 1rem; border-radius: 30px; background-color: #333; color: white; font-weight: bold; font-size: 26px; } h2:before { position: absolute; top: 100%; left: 40px; height: 0; width: 0; border-style: solid; border-color: transparent; border-top-color: #333; border-width: 8px; content: ""; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>丸枠の吹き出しにした見出しデザイン</h2> </div> </body></html>

右と下に破線を引き枠で囲んだCSS見出しデザイン

「border」プロパティで内側に破線を入れ、「outline」プロパティで枠で囲んでます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 3rem; box-sizing: border-box; background-color: #fefefe; } h2 { padding: 1rem; border-right: 3px dashed; border-bottom: 3px dashed; border-radius: -30px; color: #62c462; font-size: 26px; font-weight: bold; outline: 3px solid; outline-offset: 5px; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>右と下に細線を引き枠で囲んだ見出し</h2> </div> </body></html>

内側にドット線を入れたCSS見出しデザイン

「box-shadow」で枠を広げ、borderプロパティでドット線を入れています。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 6rem; box-sizing: border-box; background-color: #fefefe; } h2 { padding: 1rem; border: 2px dotted white; border-radius: 30px; box-shadow: 0 0 0 5px #333; background-color: #333; color: white; font-size: 26px; font-weight: bold; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>内側にドット線を入れる</h2> </div> </body></html>

枠線の上にドット線を重ねたCSS見出しデザイン

「outline」プロパティでドット線を入れています。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { padding: 1rem; border: 15px solid; color: #C66363; font-size: 26px; font-weight: bold; outline: 2px dotted white; outline-offset: -8px; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>枠線の上にドット線を重ねる</h2> </div> </body></html>

左上と右下の角を隠したCSS見出しデザイン

「linear-gradient」で角を差し込んだようにしています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 4rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 20px; box-shadow: 0 0 5px #333; background-color: #47A7CC; color: white; font-weight: bold; font-size: 24px; } h2::before { position: absolute; top: -10px; bottom: -10px; left: -10px; right: -10px; background-image: linear-gradient(135deg, white 25px, transparent 25px calc(100% - 25px), white calc(100% - 25px)); content: ''; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>左上と右下の角を隠した見出しデザイン</h2> </div> </body></html>

左上と右下に斜めの線を入れたCSS見出しデザイン

before,after疑似要素で「skew」を指定し傾斜させています。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { position:relative; display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 4rem; box-sizing: border-box; background-color: #fefefe; z-index:0; } h2 { position: relative; padding: 15px 15px 15px 65px; color: white; font-weight: bold; font-size: 26px; } h2::before, h2::after { position: absolute; text-align:center; z-index: -1; } h2::before { top: 0; left: 0; width: 100%; height: 100%; background-color: #333; transform: skew(-20deg); content: ''; } h2::after { top: -15px; left: 0; width: 50px; height: 80px; transform: skew(-20deg); background-color: #F08F33; box-shadow: 2px 0 5px #333; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-transform: uppercase; font-size: 10px; line-height: 50px; content: 'heading'; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>大きさを変えた傾斜枠を重ねる</h2> </div> </body></html>

タグ風にしたCSS見出しデザイン

「linear-gradient」で枠を変形し、「radial-gradient」で穴を作っています。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 15px 15px 15px 30px; background-image: radial-gradient(circle, white 2px, #bf4740 3px 7px, transparent 8px), linear-gradient(135deg, transparent 10px, #CA9F7B 11px), linear-gradient(45deg, transparent 10px, #CA9F7B 11px); background-repeat: no-repeat; background-size: 20px, 100% 50%, 100% 50%; background-position: left, top, bottom; font-weight: bold; font-size: 26px; overflow: hidden; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>タグ風にした見出しデザイン</h2> </div> </body></html>

左上と右下に斜めの線を入れたCSS見出しデザイン

「linear-gradient」で斜めの線を入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 1rem; background-image: linear-gradient(135deg, #2ce0e0 15px, #efefef 15px calc(100% - 15px), #2ce0e0 15px); color: #212121; font-weight: bold; font-size: 26px; overflow: hidden; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>左上と右下に斜めの線をいれる</h2> </div> </body></html>

左上の角を折ったCSS見出しデザイン

before疑似要素で指定した「border」プロパティでめくれたようにしています。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 1rem; box-shadow: 10px 10px #715c47; background-image: linear-gradient(135deg, transparent 10px, #efefef 10px); color: #212121; font-weight: bold; font-size: 26px; overflow: hidden; } h2::before { position: absolute; content: ''; top: 0px; left: 0px; border-width: 15px 15px 0px 0px; border-style: solid; border-color: transparent #715c47 transparent; box-shadow: 0 0 5px #000; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>左上の角を折った見出しデザイン</h2> </div> </body></html>

右下の角を折ったCSS見出しデザイン

before疑似要素で「border」を指定し折り目を入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 4rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 1rem; border-left: 15px solid #bae52d; background-image: linear-gradient(-45deg, transparent 10px, #efefef 10px); color: #212121; font-weight: bold; font-size: 26px; overflow: hidden; } h2::before { position: absolute; content: ''; right: 0px; bottom: 0px; border-width: 0px 0px 15px 15px; border-style: solid; border-color: transparent #bae52d transparent; box-shadow: 0 0 5px #000; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>右下の角を折った見出しデザイン</h2> </div> </body></html>

下側に影をつけて付箋風にしたCSS見出しデザイン

「box-shadow」で影をつけてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; margin-bottom: 0.2rem; padding: 1rem; border-left: 15px solid #715C47; box-shadow: 0 2px 6px #333; background-color: #BCA996; color: #212121; font-weight: bold; font-size: 26px; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>影をつけ付箋風にした見出し</h2> </div> </body></html>

文字の左にリボンを付けたCSS見出しデザイン

before,after疑似要素の「transform: skew」で変形させリボンを作ってます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding: 15px 15px 15px 45px; overflow: hidden; background: #5e292d; color: #f2b0b4; font-size: 26px; font-weight: bold; } h2::before, h2::after { position: absolute; top: -2px; left: 10px; width: 20px; height: 50%; background-color: #f2b0b4; content: ''; } h2::before { transform: skewY(25deg); } h2::after { transform: skewY(-25deg); } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>文字の左側にリボンをつける</h2> </div> </body></html>

背景の端を山形に変形させたCSS見出しデザイン

before,after疑似要素で「transform: skew」を指定し要素を変形させています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { position:relative; display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; z-index:0; } h2 { position: relative; padding: 15px; color: #bfb19a; font-size: 26px; font-weight: bold; } h2::before, h2::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; z-index: -1; } h2::before { background-color: #bfb19a; transform: skew(15deg); } h2::after { background-color: #0A0F30; transform: skew(-25deg); } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>背景を変形させた見出しデザイン</h2> </div> </body></html>

枠線と変形させてずらしたCSS見出しデザイン

before、after疑似要素に「transform: skew」を指定し背景を枠線にくぐらせたようにしています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { position:relative; display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; z-index:0; } h2 { position: relative; padding: 15px; border-left: 5px solid #E9DD2D; border-right: 5px solid #E9DD2D; background-color: #E9DD2D; color: #563e26; font-size: 26px; font-weight: bold; } h2::before, h2::after { position: absolute; top: -8px; left: 0; width: 100%; height: 110%; border-top: 3px solid; border-bottom: 3px solid; transform: skew(15deg); content: ''; } h2::before { border-left: 2px solid; z-index: -1; } h2::after { border-right: 2px solid; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>枠線を変形させてずらした見出し</h2> </div> </body></html>

枠線を変形させてずらしたCSS見出しデザイン

before疑似要素に「transform: skew」を指定し枠線を変形させています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { position:relative; display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 6rem; box-sizing: border-box; background-color: #999; z-index:0; } h2 { position: relative; padding: 15px; background: #020423; color: #6CE0CC; font-size: 26px; font-weight: bold; } h2::before { position: absolute; top: 0px; left: 0; width: 100%; height: 100%; border: 1px solid; content: ''; transform: skew(25deg) rotate(1deg); z-index: -1; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>枠線を変形させてずらす</h2> </div> </body></html>

背景の左端だけ尖らせたCSS見出しデザイン

before,after疑似要素で幅、高さ50%、topの位置を変え「transform: skew」を指定し要素を変形させています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { position:relative; display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; z-index:0; } h2 { position: relative; padding: 15px; color: #F2B0B4; border-right: 5px solid; background: #11364A; font-size: 26px; font-weight: bold; } h2::before, h2::after { position: absolute; left: -15px; width: 50%; height: 50%; background: #11364A; content: ''; z-index: -1; } h2::before { top: 0; transform: skew(-45deg); } h2::after { top: 50%; transform: skew(45deg); } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>背景を変形させた見出しデザイン</h2> </div> </body></html>

背景の端を山形に変形させたCSS見出しデザイン

before,after疑似要素で「transform: skew」を指定し要素を変形させています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { position:relative; display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; z-index:0; } h2 { position: relative; padding: 15px; color: #DF4B4E; font-size: 26px; font-weight: bold; } h2::before, h2::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom: 5px solid #DF4B4E; background: #101F34; content: ''; z-index: -1; } h2::before { transform: skew(25deg); } h2::after { transform: skew(-25deg); } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>背景を変形させた見出しデザイン</h2> </div> </body></html>

最初の文字を斜めに色分けしたCSS見出しデザイン

first-letter疑似要素の「linear-gradient」で最初の文字だけ斜めに色分けしました

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 3rem; box-sizing: border-box; background-color: #fefefe; } h2 { color: #1cd8db; font-size: 30px; font-weight: bold; text-align:center; } h2::first-letter { background-image: linear-gradient(45deg, #999 50%, #1cd8db 50%); -webkit-background-clip: text; color: transparent; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>最初の文字を斜めに色分けする</h2> </div> </body></html>

1文字目だけ背景を入れて枠線で囲んだCSS見出しデザイン

first-letter疑似要素で最初の文字だけ背景を入れ、枠で囲んだデザインです

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 4rem; box-sizing: border-box; background-color: #fefefe; } h2 { border: 2px solid; padding: 0.5rem 0.5rem 0.5rem 0; font-size: 26px; font-weight: bold; } h2::first-letter { padding: 0.5rem; background-color: black; color: white; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>1文字目だけ背景を入れて線で囲む</h2> </div> </body></html>

文字の上に背景を入れた英字を配置したCSS見出しデザイン

contentに 'heading'を設定。位置を調整し文字の上に背景付きの英字を配置しています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 6rem; box-sizing: border-box; background-color: #ccc; } h2 { position: relative; padding:1rem; background-color:white; font-weight: bold; font-size: 26px; text-align:center; } h2::before { position: absolute; top: -15px; left: 50%; width: 100%; transform: translateX(-50%); background-color: #333; color: #ea504a; font-size: 20px; text-transform: uppercase; content: 'heading'; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>文字の上に英字を配置</h2> </div> </body></html>

文字の左に英字を配置し線を引いたCSS見出しデザイン

contentに 'heading'を設定。位置を調整し文字の左に配置。「border-right」で線を引いています。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 5rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; padding-left: 25px; font-weight: bold; font-size: 30px; } h2::before { position: absolute; top: -10px; left: 0; border-right: 5px solid #1ac2d8; color: black; font-size: 10px; writing-mode: vertical-rl; -ms-writing-mode: tb-rl; text-transform: uppercase; content: 'heading'; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>左に英字を配置し線をひく</h2> </div> </body></html>

文字の上に短い下線付きの英字を配置したCSS見出しデザイン

contentに 'heading'を設定。位置を調整し文字の上に短い下線付き英字を配置しています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 3rem; box-sizing: border-box; background-color: #fefefe; } h2 { position: relative; margin-bottom: 0.2rem; font-weight: bold; font-size: 26px; text-align:center; } h2::before { position: absolute; top: -45px; left: 50%; transform: translateX(-50%); padding-bottom: 15px; background-image: linear-gradient(#9e16ba 0 100%); background-repeat: no-repeat; background-size: 40px 3px; background-position: center 30px; color: black; font-size: 20px; text-transform: uppercase; content: 'heading'; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <h2>文字の上に英字を配置</h2> </div> </body></html>