[CSS] ひとことコメントデザイン

コメントの位置の微調整は必要になりますが、線の太さや色、角度などを変更することによって色々なパターンが作り出せそうです。

DEMO

Happy Birthday Mr. President!

Don't think! Feeeel!

Imagination is more important
than knowledge.

HTML

 
 
Happy Birthday Mr. President!


 
Don't think! Feeeel!
 

 
Imagination is more important
than knowledge.
 

CSS

/* モンロー */
.speech-right {
 display: inline-block;
 padding-left: 1em;
 transform: rotate(-5deg);
 -webkit-transform: rotate(-5deg);
 -ms-transform: rotate(-5deg);
}
.speech-right:before, .speech-right:after {
 content: " ";
 position: relative;
 display: block;
 border-top: #000 1px solid;
}
.speech-right:before {
 top: 0;
 left: -1em;
 width: 8em;
 padding-top: 1.2em;
 transform: rotate(-15deg);
 -webkit-transform: rotate(-15deg);
 -ms-transform: rotate(-15deg);
}
.speech-right:after {
 top: 1em;
 left: -.5em;
 width: 6em;
 transform: rotate(10deg);
 -webkit-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
}
/* リー */
.speech-left {
 position: relative;
 top: 120px;
 display: inline-block;
 padding-left: 1em;
 transform: rotate(5deg);
 -webkit-transform: rotate(5deg);
 -ms-transform: rotate(5deg);
}
.speech-left:before, .speech-left:after {
 content: " ";
 position: absolute;
 display: block;
 border-top: #000 1px solid;
}
.speech-left:before {
 top: -1.5em;
 right: -1em;
 width: 8em;
 padding-top: 1.2em;
 transform: rotate(15deg);
 -webkit-transform: rotate(15deg);
 -ms-transform: rotate(15deg);
}
.speech-left:after {
 top: 2.5em;
 right: -1em;
 width: 6em;
 transform: rotate(-10deg);
 -webkit-transform: rotate(-10deg);
 -ms-transform: rotate(-10deg);
}
/* シュタイン */
.speech-top {
 position: relative;
 display: inline-block;
 text-align: center;
}
.speech-top + img {
 display: block;
 margin-top: 1em;
}
.speech-top:before, .speech-top:after {
 content: " ";
 position: absolute;
 display: block;
}
.speech-top:before {
 bottom: 0;
 left: -.5em;
 height: 3em;
 border-left: #000 1px solid;
 transform: rotate(-35deg);
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
}
.speech-top:after {
 bottom: 0;
 right: -.5em;
 height: 3em;
 border-right: #000 1px solid;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}

CSS対応状況

• CSS Generated content
• CSS3 Transforms