盒子里有一个像聊天一样的三角形

问题描述 投票：4回答：7

我想用CSS制作一个矩形框，然后是一个小三角形，如this。我已经完成了它，但我希望与“：after”相同的输出。我试过但我不能打印任何东西。

p {
        display:inline-block;
        padding:5px 6px 8px 6px;
        border-radius: 6px;
        float: right;
        margin-right: 40px;
        color:black;
        background-color:#146f79;
}

span {
            position:absolute;
            margin-top:-6px;
            margin-left:-5px;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 12px solid #146f79;
            transform:rotate(-45deg);
}
<p>
Hello!!!<span></span>
</p>
html css css-shapes
7个回答
4
投票

这是与:after属性相同的输出：

HTML

<p>
  Hello!!!
</p>

CSS

p {
  display:inline-block;
  padding:5px 6px 8px 6px;
  border-radius: 6px;
  float: right;
  margin-right: 40px;
  color:black;
  background-color:#146f79;
  position: relative;
}

p:after {
  content: "";
  position:absolute;
  margin-top:-6px;
  margin-left:-5px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #146f79;
  transform:rotate(-45deg);
  right: -15px; 
  top: 10px;
}

Fiddle

2
投票

我认为这个网站可以帮助你：https://css-tricks.com/examples/ShapesOfCSS/

#talkbubble { width: 120px; height: 80px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

#talkbubble:before { content:""; position: absolute; left: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-left: 26px solid red; border-bottom: 13px solid transparent; }
<div id="talkbubble"></div>
1
投票

使用时：必须定义内容后，由于您的元素没有文本内容，只需执行此操作即可！

p:after {
    content: "";
    position:absolute;
    margin-top:-6px;
    margin-left:-5px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #146f79;
    transform:rotate(-45deg);
}
1
投票

#chatbubble {
   margin-left:25px;
   width:120px;
   height:40px;
   background-color:green;
   position:relative;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   line-height:40px;
   text-align:center;
}
#chatbubble:after {
   content:"";
   position:absolute;
   right:-13px;
   border-right:13px solid transparent;
   border-left:13px solid transparent;
   border-top:13px solid green;
}
<div id="chatbubble">Hello</div>
1
投票

我找到了一个IOS风格的例子，左/右（发送者/接收者）可能有帮助：

body {
  background-color: #eee;
  color: #222;
  font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  padding: 40px 20px;
  margin: 0 auto;
  width: 400px;
}

.bubble {
  background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.25, rgb(210,244,254)),
	color-stop(1, rgb(149,194,253))
  );
  border: solid 1px rgba(0, 0, 0, 0.5);
  /* vendor rules */
  border-radius: 20px;
  /* vendor rules */
  box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  /* vendor rules */
  box-sizing: border-box;
  clear: both;
  float: left;
  margin-bottom: 20px;
  padding: 8px 30px;
  position: relative;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
  width: auto;
  max-width: 100%;
  word-wrap: break-word;
}

.bubble:before, .bubble:after {
  border-radius: 20px / 10px;
  content: '';
  display: block;
  position: absolute;
}

.bubble:before {
	border: 10px solid transparent;
	border-bottom-color: rgba(0, 0, 0, 0.5);
	bottom: 0;
	left: -7px;
	z-index: -2;
}

.bubble:after {
  border: 8px solid transparent;
  border-bottom-color: #d2f4fe;
  bottom: 1px;
  left: -5px;
}

.bubble--alt {
  background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.25, rgb(172,228,75)),
	color-stop(1, rgb(122,205,71))
  );
  float: right;
}

.bubble--alt:before {
  border-bottom-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px / 10px;
  left: auto;
  right: -7px;
}

.bubble--alt:after {
  border-bottom-color: #ace44b;
  border-radius: 20px / 10px;
  left: auto;
  right: -5px;
}
<div class="container">
	<div class="bubble">
		Box with a triangle like a chat
	</div>
	
	<div class="bubble bubble--alt">
		Stackoverflow.com
	</div>
	
	<div class="bubble">
		Lorem ipsum dolor sit amet, magna facer et eam, vis ne laoreet voluptatum, cu tale erat vivendo pri. Ne nec nibh dicant quaestio. At sit erant movet possim, no viderer forensibus duo.
	</div>
	
	<div class="bubble bubble--alt">
		Lorem ipsum dolor sit amet, magna facer et eam, vis ne laoreet voluptatum.
	</div>
	
</div>
1
投票

Kadriles是对的，但我已经做了一个简单的例子，没有任何负边距或框大小

.bubble {
  position: absolute;
  background: slategray;
  color: white;
  padding: 6px 10px;
  border-radius: 5px 0 5px 5px;
}

.bubble:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  border-top: 8px solid slategray;
  border-right: 12px solid transparent;
}
<div class="bubble">Hello</div>
0
投票

如果你想在形状周围有一个边框并且更具适应性，试试这个：https://jsfiddle.net/8qg9o3a6/7/

HTML

<div class="bubble-container">This is a bubble</div>

CSS

:root {
  --right: -40px;
  --sizearrow: 20px;
  --height: 120px;
  --top: calc(var(--height)/2 - var(--sizearrow));
  --bordercolor: #000;
}

.bubble-container {
    position: relative;
    border: 2px solid var(--bordercolor);
    margin: 0 auto;
    border-radius: 10px;
    height: var(--height);
    width: 465px;
}

.bubble-container::after {
  content: '';
    position: absolute;
    right: var(--right);
    top: calc(var(--top) + 1.5px);
    width: 0;
    height: 0;
    border: var(--sizearrow) solid transparent;
    border-left-color: #fff;
}

.bubble-container::before {
  content: '';
    position: absolute;
    right: calc(var(--right) - 5px);
    top: var(--top);
    width: 0;
    height: 0;
    border: 22px solid transparent;
    border-left-color: var(--bordercolor);
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.