popping box

・okomeさん「シンプルポップな雰囲気、白背景に色んな色を散りばめているような感じ。」

自動改行“しない”で作成しています。
HEAD

@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil|Inder');

body{
font-family:"Inder","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#000;
background:#fff;
margin:0;
padding:0;}

@media screen and (min-width:701px){

.wrp{
width:500px;
margin:0 auto;}

}

@media screen and (max-width: 700px){
.wrp{
width:100%;
margin:0 auto;}

}

.con{
margin:50px 30px 20px;
padding:0;
text-align:center;
position: relative;
}

.con:before{
content: "";
border-color: #aacf53 #fff #fff #aacf53;
border-style: solid;
border-width:24px 24px 0 0;
top:0;
position: absolute;
left:0;}

.con:after {
content: "";
border-color: #fff #e5e338 #e5e338 #fff;
border-style: solid;
border-width: 0 0 24px 24px;
bottom: 0;
position: absolute;
right: 0;}

.main{
margin:0;
padding:30px 15px;
text-align:center;
position: relative;
}

.main:before{
content: "";
border-color: #4ec5c1 #4ec5c1 #fff #fff;
border-style: solid;
border-width:0 24px 24px 0;
top:0;
position: absolute;
right:0;}

.main:after {
content: "";
border-color: #fff #fff #ec576b #ec576b;
border-style: solid;
border-width: 0 24px 24px 0;
bottom: 0;
position: absolute;
left: 0;}

.menu{margin:30px 0;}

.menu a{
margin:0 5px;
padding:2px 8px;
color:#fff;
display:inline-block;
width:35px;
border:none;}

.menu a:hover{
margin:0 5px;
padding:2px 8px;
display:inline-block;
width:35px;
transform:rotate(10deg);
border:none;}

.gr{background:#aacf53;}

.blu{background:#4ec5c1;}

.pi{background:#ec576b;}

.ye{
background:#e5e338;}

.info{
border:solid 1px #e5e338;
box-shadow:0 0 0 1px #fff,0 0 0 2px #ec576b;
margin:10px 10px 20px;
padding:10px;
text-align:left;}

strong{
background:linear-gradient(transparent 50%, #f9c89b 0%);
font-weight:normal;
margin:0 1px;
padding:0 3px;}

h1{
font-size:20px;
font-weight:normal;
font-family:Allerta Stencil, sans-serif;
color:#000;
margin:5px 20px 20px;
padding:0;
text-align:center;}

h2{
font-size:14px;
font-weight:normal;
font-family:Allerta Stencil, sans-serif;
margin:10px 0;
position:relative;
padding:5px 30px;
}

h2:before,h2:after{
content:"";
display:block;
width:10px;
height:10px;
border:2px solid #4ec5c1;
position:absolute;
top:7px;
left:3px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

h2:before{
top:8px;
left:10px;
height:12px;
width:12px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
border:none;
background:rgba(229, 227, 56,.8);}

h3{
font-size:14px;
font-weight:normal;
font-family:Allerta Stencil, sans-serif;
margin:10px 0;
position:relative;
padding:5px 30px;
}

h3:before,h3:after{
content:"";
display:block;
width:10px;
height:10px;
border:2px solid #ec576b;
position:absolute;
top:7px;
left:3px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

h3:before{
top:8px;
left:10px;
height:12px;
width:12px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
border:none;
background:rgba(170, 207, 83,.6);}

a{
color:#5f9ea0;
text-decoration:none;
padding:0 3px;
transition:0.5s;
border-bottom:solid 1px #fff;}

a:hover{border-bottom:solid 1px #aacf53;}

</style>

BODY

midashi1

midashi2