标签: css-shapes

如何使用纯 CSS 或画布制作如下图所示的图像？我需要它有一个透明的背景；你能帮我吗？

我有这个代码片段：

.multiply-button {
  display: table;
  background: rgba(0, 0, 0, 0);
  border: none;
  color: white;
  padding: 0;
}
.multiply-button-content {
  display: table-cell;
  background: green;
  padding: 10px 9px;
  border: solid 1px black;
  border-right: none !important;
}
.multiply-button-arrow {
  display: table-cell;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 12px;
  border-color: transparent transparent transparent green;
}

<button id="multiply-button" class="multiply-button">
  <div class="multiply-button-content">Multiply</div>
  <div class="multiply-button-arrow"></div>
</button>

我需要在这个“箭头”按钮上添加边框。我可以轻松地为矩形部分添加边框（我已经做到了），但是如何在三角形部分上制作此边框？

我正在寻找创建一个具有倒圆边框的隧道式 div

如您所见，它具有从左到右的“扩展隧道效应”。理想情况下，方格背景是透明的，但如果这是不可能的，我可以让它使用纯色背景。

谁能帮我创建这个 css3 形状？希望有一个我可以玩的jsfiddle？

谢谢！

我有一个容器元素，我想弄清楚是否可以将它塑造成两个 45 度角。像这样：

它现在只是一个矩形：

<div id="home-img-text">
        <div id="home-img-text-container">
            <div id="home-img-text-description">WRECKING <br>& DEMOLITION <br> DONE RIGHT.</div>
        </div>
    </div>
#home-img-text-container {
    background: rgba(0,0,0,.8);
    padding: 30px 20px;
}
#home-img-text-description {
    color: #FFF;
    font-size: 2.5em;
    line-height: 1.4em;
}

我该怎么做呢？

更新：

.home-img-text {
    position: absolute;
    left: 10%;
    top: 25%;
}
#home-img-text-container1, #home-img-text-container2 {
    position: relative;
    margin-bottom: 20px;
    background: rgba(0,0,0,.8);
    opacity: 0;
    transition:1s; -webkit-transition:1s;
    overflow: hidden;
}
#home-img-text-container1.fadeDisplay {
    opacity: 1;
    transform: translateX(30px); -webkit-transform: translateX(30px);
}
#home-img-text-container2.fadeDisplay {
    opacity: 1;
    transform: translateX(30px); -webkit-transform: translateX(30px);
}

#home-img-text-description …

我们如何将 1px 边框应用于这些气泡？

这篇类似的 SO 文章在这里不起作用，因为我们使用不同的方法来生成语音气泡

.chat-messages {
  width: calc(100%);
  padding-bottom: 5px;
  background-color: #f3f3f4;
}
.sb-time {
  font-size: 10pt;
  font-weight: 400;
  margin: 7px -5px 0px 10px;
  float: right;
}
.sb {
  font-size: 13pt;
  font-weight: 500;
  border-radius: 6px;
  display: block;
  padding: 10px 15px 5px 15px;
  position: relative;
  vertical-align: top;
  clear: both;
}
.sb::before {
  content: "\00a0";
  display: block;
  height: 15px;
  position: absolute;
  top: 10px;
  -moz-transform: rotate(30deg) skew(-35deg);
  -ms-transform: rotate(30deg) skew(-35deg);
  -o-transform: rotate(30deg) skew(-35deg);
  -webkit-transform: rotate(30deg) skew(-35deg);
  transform: rotate(30deg) skew(-35deg); …

有没有办法使用 CSS 创建像下面按钮中那样的箭头？

我知道如何创建像这样的三角形箭头

#triangle_arrow {
        top: 3pt;
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-right: 0.1em solid black;
        border-top: 0.1em solid black;
        transform: rotate(45deg);
    }

但那条朝向箭头角的线让我感到困惑！

有没有办法只用html&css制作这个数字？

我想使用 css 创建一个类似于下图的对话气泡。

我该怎么做呢？

我有一个带有'li'-s的导航菜单.我想把这个li变成六角形,如下所示:

我怎样才能做到这一点？

创建以下形状的最佳方法是什么？