[ コピペで使える ] CSS DIV BOX 囲い枠

DIV BOX

SHARE

[ コピペで使える ] CSS DIV BOX 囲い枠

青い枠で囲うCSS。

 

このままコピペで使えるよ。

サンプルは↓コレね。こんな感じの枠。

 

.flamecss{
position: relative;
padding: 15px 15px 15px 30px;/*上右下左*/
font: 14px/1.6 ‘arial narrow’, sans-serif;
border: solid 2px #adcce8;
border-radius:8px;/*角丸*/
color: #448ccb;
width:90%;
background: #fff;
letter-spacing: 3px;/*文字間*/
}
.flamecss:before{
content: “css”; /* 好きな文字を記述 */
position: absolute;
display: block;
top: -15px;
left: 20px;
background: #fff;
font-size: 16px;
font-weight: bold;
padding: 0 10px;
}
.flamecss {
font-weight: bold;/* Fontの太さ、細くはsolid */
}

 

<div class=”flamecss”>
ここに何か文字を書くだけ
</div>

 




可愛くテープで止めた感じ。

 

  • List01
  • List02
  • list03
  • list04

 

.tape {
background-color: #ffe;
border: 2px solid #999;
list-style: none;
position: relative;
margin-top: 4em;
padding: 2em 1em 1em;
border-radius:8px;/*角丸*/
letter-spacing: 3px;/*文字間*/
}
.tape:before {
content: “”;
background-color: rgba(255, 228, 181, .6);
position: absolute;
top: -1.5em;
left: 40%;
width: 100px;
height: 40px;
transform: rotate( -10deg );
}

 

<ul class=”tape”>
<li>List01</li>
<li>List02</li>
<li>list03</li>
<li>list04</li>
</ul>

最後まで読んでくれてありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です