Last active
January 31, 2019 08:17
-
-
Save alysantwanet/dca715178d565440c821e779349baccd to your computer and use it in GitHub Desktop.
吹き出しの方向に合わせてアイコンを反転させるCSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*吹き出し用css------------------------------------*/ | |
.entry-content .l-fuki, | |
.entry-content .r-fuki { | |
position: relative; | |
width: 80%; | |
box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
padding: 10px; | |
border-radius: 15px; | |
border: 2px solid #ccc; | |
background-color: #fff; | |
z-index: 1; | |
} | |
.entry-content .l-fuki { | |
margin: 20px 20% 40px 0; | |
} | |
.entry-content .r-fuki { | |
margin: 20px 0 40px 19%; | |
} | |
.entry-content .l-fuki::before, | |
.entry-content .r-fuki::before { | |
position: absolute; | |
content: ""; | |
top: 16px; | |
width: 10px; | |
height: 10px; | |
border-right: 2px solid #ccc; | |
border-bottom: 2px solid #ccc; | |
background-color: #fff; | |
z-index: 2; | |
} | |
.entry-content .l-fuki::before { | |
right: -7px; | |
transform: rotate(-45deg); | |
-webkit-transform: rotate(-45deg); | |
} | |
.entry-content .r-fuki::before { | |
left: -7px; | |
transform: rotate(135deg); | |
-webkit-transform: rotate(135deg); | |
} | |
.entry-content .l-fuki::after, | |
.entry-content .r-fuki::after { | |
position: absolute; | |
content: ""; | |
width: 80px; | |
height: 80px; | |
top: -10px; | |
border-radius: 50px; | |
border: 3px solid #fff; | |
background-size: cover; | |
background-position: center center; | |
background-repeat: no-repeat; | |
box-shadow: 1px 1px 5px #aaa; | |
} | |
.entry-content .l-fuki::after { | |
right: -110px; | |
transform: scaleX(-1);//左に吹き出しがある場合左右反転させる | |
} | |
.entry-content .r-fuki::after { | |
left: -110px; | |
} | |
@media screen and (max-width: 620px) { | |
.entry-content .l-fuki, | |
.entry-content .r-fuki { | |
width: 70%; | |
padding: 10px; | |
} | |
.entry-content .l-fuki { | |
margin-right: 30%; | |
} | |
.entry-content .r-fuki { | |
margin-left: 30%; | |
} | |
} | |
@media screen and (max-width: 478px) { | |
.entry-content .l-fuki::after, | |
.entry-content .r-fuki::after { | |
width: 60px; | |
height: 60px; | |
border-radius: 30px; | |
} | |
.entry-content .l-fuki::after { | |
right: -84px; | |
} | |
.entry-content .r-fuki::after { | |
left: -84px; | |
} | |
} | |
/*アイコン画像*/ | |
.hoge01::after {background-image:url(画像のURL);} | |
.hoge02::after {background-image:url(画像のURL);} | |
.fuga01::after {background-image:url(画像のURL);} | |
.fuga02::after {background-image:url(画像のURL);} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- htmlで吹き出しを呼び出す時の書き方 --> | |
<p class="r-fuki hoge01">右側に吹き出しがでます</p> | |
<p class="l-fuki fuga01">左側に吹き出しがでます</p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment