Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.entry-content .person-right,
.entry-content .person-left{
padding-top: 15px;
padding-bottom: 15px;
min-height: 100px;
}
.entry-content .person-right img,
.entry-content .person-left img{
background-color: #333;
border: 1px solid #555;
border-radius: 2.5em;
width: 75px;
height: 75px;
margin-top: 2px;
background-size: cover;
}
.entry-content .person-right img{
background-image: url("画像のURL");
float: right;
}
.entry-content .person-left img{
background-image: url("画像のURL");
float: left;
}
.entry-content .person-right p,
.entry-content .person-left p{
padding: 10px;
position: relative;
border: 1px solid #555;
border-radius: 10px;
box-sizing: border-box;
width: calc(100% - 100px);
margin-top: 16px;
}
.entry-content .person-left p{
float: right;
}
.person-right p:before,
.person-right p:after,
.person-left p:before,
.person-left p:after{
top: 13px;
}
.person-right p:before {
content: '';
border: 10px solid transparent;
border-left: 15px solid black;
position: absolute;
left: 100%;
}
.person-right p:after {
content: '';
border: 10px solid transparent;
border-left: 15px solid white;
position: absolute;
left: calc(100% - 1px);
}
.person-left p:before {
content: '';
border: 10px solid transparent;
border-right: 15px solid black;
position: absolute;
right: 100%;
}
.person-left p:after {
content: '';
border: 10px solid transparent;
border-right: 15px solid white;
position: absolute;
right: calc(100% - 1px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.