我正在尝试在我正在处理的网站上复制聊天布局。我能够创建聊天气泡并将内容放在正确的位置,我只是无法按照我想要的方式获取它。只有一些我遇到麻烦的小事。我无法弄清楚如何让泡泡边缘的三角形与泡沫的其余部分一样薄,并使其变得越来越小。我将图像中的符号定位稍微低一些,就像我需要它的图像一样。最后,#34;登录评论"需要在图像的左边一点点。如果有人能够对这些事情有所了解,那将非常感激!
目前:
我想要实现的目标:
如你所见,我非常接近!只是一些小事给我带来麻烦。
HTML:
<img src="{{ .picture }}">
<p>Hello, {{ .nickname }}</p>
CSS:
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
<div class="cell two">
<a href="#"><img class="sign-in-img" src="<?php bloginfo('stylesheet_directory'); ?>/images/sign-in.png" /></a>
</div>
</div>
<span class="si">Sign In to Comment</span>
答案 0 :(得分:3)
这是一种方法:
<div class="wrapper">
<p class="talk-bubble">
talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble
</p>
<p class="sign-in">
Sign In to Comment
</p>
<img src="your/image.png" />
</div>
CSS:
div.wrapper {
position: relative;
padding-bottom: 0px;
background-color: #ffffff;
z-index: -2;
}
div.wrapper img {
position: absolute;
bottom: 0;
right: 0;
border: 1px solid black;
width: 40px;
height: 40px;
}
.sign-in {
text-align: right;
margin: 0;
margin-right: 50px;
padding: 0;
}
p.talk-bubble {
border: 1px solid #3A7DBA;
padding: 15px;
background-color: #CDE5F7;
position: relative;
margin-right: 60px;
}
p.talk-bubble:before,
p.talk-bubble:after {
box-sizing: border-box;
padding: 0;
content: '';
width: 20px;
height: 20px;
display: block;
position: absolute;
border: 20px solid transparent;
}
p.talk-bubble:before {
z-index: -1;
border-bottom: 20px solid #3A7DBA;
right: -12px;
bottom: -1px;
}
p.talk-bubble:after {
border-bottom: 20px solid #CDE5F7;
right: -10px;
bottom: 0px;
}
答案 1 :(得分:0)
检查出来:
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 .5em;
border:1px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
min-width: 90%;
max-width: 90%;
background-color: #E0F6F2;
}
.triangle-border.blue {
background-color: #CDE5F7;
border:1px solid #3A7DBA;
}
.triangle-border.right {
margin-right:30px;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:25px; /* controls vertical position */
bottom:auto;
left:auto;
right:-15px; /* value = - border-left-width - border-right-width */
border-width:5px 0 5px 15px;
border-color:transparent #3A7DBA;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top: 27px;
bottom: auto;
left: auto;
right: -13px;
border-width: 3px 0 3px 13px;
border-color: transparent #ccf;
}
.pagecontent .cols .col.two .sign-in {
table-layout: fixed;
display: table;
outline: none;
}
.pagecontent .cols .col.two .sign-in .cell {
display: table-cell;
margin: 5px;
height: 100%;
}
.pagecontent .cols .col.two .sign-in .cell.one {
width: 85%;
}
.pagecontent .cols .col.two .sign-in .cell.two {
padding-left: 2%;
width: 15%;
}
.pagecontent span.si {
font-size: .8em;
color: #808C8D;
}
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
</div>