那些遇到过的问题

在一侧为CSS边框箭头指定边框

luk*_*ine 8 html css css3 css-shapes

我希望有人可以帮我找到一个优雅的方法来获得CSS箭头边框上的边框.

我想创建这个:

在此输入图像描述

到目前为止,这是我的代码:

HTML

<div class="message-container customer">
    <p class="message">Great thanks</p>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

.message {
    width: auto;
    max-width: 66%;
    padding: 12px 30px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
    margin: 4px 0 0 0;
    position: relative;
    float: right;
    border-right: 4px solid #0892cb;
    border-radius: 5px 0 0 5px;
}

.message:after {
    top: 100%;
    right: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #FFFFFF;
    border-width: 10px;
    margin-right: -14px;
    margin-top: -10px;
    transform: rotate(45deg);
    box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
}
Run Code Online (Sandbox Code Playgroud)

这是一个有效的JS小提琴https://jsfiddle.net/kdeo3wpg/

正如你可以看到我对他的主要信息右侧的蓝色边框,但我不能想出一个办法让箭头上的蓝色边框为好.如果可能的话我真的想避免使用图像.找到一个只有CSS的解决方案会很棒.

我曾考虑尝试使用:beforesudo元素,但我无法获得我需要的完全控制权.

任何帮助将不胜感激.

UPDATE

我设法找到了解决方案,但说实话,它不是很干净.

https://jsfiddle.net/kdeo3wpg/1/

我所做的是添加一个新元素,它是边框的宽度并具有相同的背景颜色.然后我将高度设置为略小于CSS箭头的高度.然后我给我的新元素一个CSS箭头边框的背景颜色.

这是新代码:

HTML

<div class="message-container customer">
    <p class="message">
        Great thanks
        <span class="arrow-border"></span>
    </p>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

.message {
  width: auto;
  max-width: 66%;
  padding: 12px 30px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
  margin: 4px 0 0 0;
  position: relative;
  float: right;
  border-right: 4px solid #0892cb;
  border-radius: 5px 0 0 5px;
}

.message:after {
    top: 100%;
    right: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #FFFFFF;
    border-width: 10px;
    margin-right: -14px;
    margin-top: -10px;
    transform: rotate(45deg);
    box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
  }

.arrow-border {
    position: absolute;
    background: #0892cb;
    width: 4px;
    height: 9px;
    bottom: -9px;
    right: -4px;
    z-index: 1;
}

.arrow-border:after {
    top: 100%;
    right: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #0892cb;
    border-width: 3px;
    margin-right: -3px;
    margin-top: -3px;
    transform: rotate(45deg);
    box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
}
Run Code Online (Sandbox Code Playgroud)

虽然这个解决方案有效,但我觉得可能有更好更清洁的选择,所以我仍然愿意接受建议.

Wea*_*.py 5

使用svg您可以创建文本气泡并应用于linearGradient它.

body {
  background: #eee;
}
Run Code Online (Sandbox Code Playgroud) 
<svg width="100" height="50" preserveAspectRatio="none" viewBox="-1 -1 102 52">
  <defs>
    <linearGradient id="grad">
      <stop offset="97%" stop-color="#fff" />
      <stop offset="97%" stop-color="#237ACB" />
    </linearGradient>
  </defs>
  <path d="M0,5 a5,5 0 0,1 5,-5 h95 v45 l-10,-10 h-85 a5,5 0 0,1 -5,-5" fill="url(#grad)" />
  <text x="50%" y="40%" text-anchor="middle" font-size="10">Great Thanks</text>
</svg>
Run Code Online (Sandbox Code Playgroud)

要使文本气泡具有动态文本,您需要将三角形用作svg.该文将在...之外svg.

body {
  background: #eee;
}
#container {
  position: relative;
  display: table;
}
#text {
  position: relative;
  max-width: 200px;
  padding: 10px;
  box-sizing: border-box;
  background: linear-gradient(to right, #fff calc(100% - 3px), #237ACB calc(100% - 3px));
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
#tri {
  position: absolute;
  z-index: 1;
  top: calc(100% - 1px);
  right: 0;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="container">
  <svg id="tri" width="15" height="15" preserveAspectRatio="none" viewBox="0 0 15 15">
    <defs>
      <linearGradient id="grad">
        <stop offset="79%" stop-color="#fff" />
        <stop offset="79%" stop-color="#237ACB" />
      </linearGradient>
    </defs>
    <path d="M0,0 h15 v15 l-15,-15" fill="url(#grad)" />
  </svg>
  <div id="text">Text bubble that will change its width to <code>max-width</code>(200px) and height to contain the dynamic text</div>
</div>
Run Code Online (Sandbox Code Playgroud)

适用box-shadow:

要添加box-shadow到svg你要申请一个SVG filter的道路上.通过CSS执行它将无法工作,因为CSS无法查看实际路径.

feFuncAelement的slope属性控制阴影的不透明度,feOffset是不言自明的.

body {
  background: #eee;
}
#container {
  position: relative;
  display: table;
}
#text {
  width: auto;
  max-width: 66%;
  padding: 12px 30px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
  margin: 4px 0 0 0;
  position: relative;
  float: right;
  border-right: 5px solid #0892cb;
  border-radius: 5px 0 0 5px;
}
#tri {
  position: absolute;
  z-index: 1;
  top: calc(100% - 1px);
  right: 0;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="container">
  <svg id="tri" width="15" height="18" preserveAspectRatio="none" viewBox="0 0 15 18">
    <defs>
      <linearGradient id="grad">
        <stop offset="70%" stop-color="#fff" />
        <stop offset="70%" stop-color="#0892cb" />
      </linearGradient>
      <filter id="shadow" height="130%">
        <feOffset dx="0" dy="2" in="SourceAlpha" result="offout" />
        <feComponentTransfer>
          <feFuncA type="linear" slope="0.1" />
        </feComponentTransfer>
        <feMerge>
          <feMergeNode/>
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
    </defs>
    <path d="M0,0 h15 v15 l-15,-15" filter="url(#shadow)" fill="url(#grad)" />
  </svg>
  <div id="text">Text bubble that will change its width to <code>max-width</code>(200px) and height to contain the dynamic text</div>
</div>
Run Code Online (Sandbox Code Playgroud)

重用svg:

要svg path多次使用相同的path元素,您可以在元素中定义defs元素,并使用元素多次使用它use,如下例所示.

body {
  background: #eee;
}
.containerIn, .containerOut {
  position: relative;
  display: table;
  margin: 4px 0 15px;
}
.text {
  width: auto;
  max-width: 66%;
  padding: 12px 30px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
  margin: 4px 0 0 0;
  position: relative;
  float: right;
  border-right: 5px solid #0892cb;
  border-radius: 5px 0 0 5px;
}
.containerIn .text {
  border: 0;
  border-left: 5px solid #689F38;
  border-radius: 0 5px 5px 0;
  float: left;
}

.tri {
  position: absolute;
  z-index: 1;
  top: calc(100% - 1px);
  right: 0;
}
.containerIn .tri {
  left: 0;
}
Run Code Online (Sandbox Code Playgroud) 
<svg width="15" height="18" preserveAspectRatio="none" viewBox="0 0 15 18">
  <defs>
    <linearGradient id="gradRight">
      <stop offset="70%" stop-color="#fff" />
      <stop offset="70%" stop-color="#0892cb" />
    </linearGradient>
    <linearGradient id="gradLeft">
      <stop offset="31%" stop-color="#689F38" />
      <stop offset="31%" stop-color="#fff" />
    </linearGradient>
    <filter id="shadow" height="130%">
      <feOffset dx="0" dy="2" in="SourceAlpha" result="offout" />
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.1" />
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <path id="triRight" d="M0,0 h15 v15z" filter="url(#shadow)" fill="url(#gradRight)" />
    <path id="triLeft" d="M0,0 v15 l15,-15z" filter="url(#shadow)" fill="url(#gradLeft)" />
  </defs>
</svg>

<div class="containerOut">
  <svg class="tri" width="15" height="18" preserveAspectRatio="none" viewBox="0 0 15 18">
    <use xlink:href="#triRight" x="0" y="0" />
  </svg>
  <div class="text">Text bubble that will change its width to <code>max-width</code>(200px) and height to contain the dynamic text</div>
</div>

<div class="containerIn">
  <svg class="tri" width="15" height="18" preserveAspectRatio="none" viewBox="0 0 15 18">
    <use xlink:href="#triLeft" x="0" y="0" />
  </svg>
  <div class="text">Text bubble that will change its width to <code>max-width</code>(200px) and height to contain the dynamic text</div>
</div>

<div class="containerIn">
  <svg class="tri" width="15" height="18" preserveAspectRatio="none" viewBox="0 0 15 18">
    <use xlink:href="#triLeft" x="0" y="0" />
  </svg>
  <div class="text">Text bubble that will change its width to <code>max-width</code>(200px) and height to contain the dynamic text</div>
</div>

<div class="containerOut">
  <svg class="tri" width="15" height="18" preserveAspectRatio="none" viewBox="0 0 15 18">
    <use xlink:href="#triRight" x="0" y="0" />
  </svg>
  <div class="text">Text bubble that will change its width to <code>max-width</code>(200px) and height to contain the dynamic text</div>
</div>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

926 次

最近记录：

9 年，3 月 前
相关归档
是否只有第一个直接孩子的CSS选择器？ 292
vim可以突出显示匹配的HTML标签,如Notepad ++吗？ 177
按中心点定位,而不是左上角 41
为什么迷路</ p>结束标记会生成一个空段落？ 21
谷歌分析是否会对下载静态网页的时间产生重大影响？ 18
如何获取包含用户的div的屏幕截图在前端上传图像？ 10
使用css calc()和step 6
透明菜单/导航栏 5
为什么我的Css代码不能用于我的Html页眉和页脚？ 4
在表格行上使用flexbox？ 4
难疑归档
如何将新的本地分支推送到远程Git存储库并跟踪它？ 4154
如何在JavaScript中将字符串转换为布尔值？ 2328
如何在Python中复制文件？ 2171
有没有办法在Android上运行Python？ 2097
没有jQuery的$(document).ready等价 1925
从字典中删除元素 1243
CSS calc()函数中的Sass变量 1182
wait()和sleep()之间的区别 1158
获取Oracle中所有表的列表？ 1073
如何旋转Android模拟器显示？ 1031