CSS3 实现边框上写入文字

效果图-1

代码-1

<div class="box"></div>

.box {
				position: relative;
				width: 300px;
				height: 150px;
				border: 3px solid black;
				border-radius: 4px;
			}
			.box::after {
				content: '工具栏';
				position: absolute;
				right: 20px;
				bottom: -15px;
				width: 80px;
				text-align: center;
				font-size: 24px;
				color: blue;
				font-weight: 900;
				background: rgb(10, 189, 224);
			}

效果图-2

代码-2

.box {
				position: relative;
				width: 300px;
				height: 150px;
				border: 3px solid black;
				border-radius: 4px;
			}
			.box::after {
				content: '工具栏';
				position: absolute;
				right: -17px;
				top: calc(50% - 24px * 1.8);
				height: 90px;
				text-align: center;
				font-size: 24px;
				writing-mode: vertical-rl;
				letter-spacing: 4px;
				color: blue;
				font-weight: 900;
				background: rgb(10, 189, 224);
			}

先对于一调整了伪类::after，对于位置，只需调整它即可，可灵活换位置