使用CSS在Border中创建一条曲线

Question

我想在边框中制作曲线..就像当你点击谷歌应用程序按钮时这里打开一个弹出窗口是指向应用程序的曲线..如何让它看到图像..

Answer 1

使用伪元素生成三角形。

我们可以通过使用前和后伪元素给三角形边框 - 它们充当2个三角形 - 外部 - 用颜色和边框颜色相同，内部颜色 - 稍微偏移 - 使用与小部件背景相同的颜色。

在以下示例中，before伪元素是＆＃39;外部＆＃39;三角形和后面的伪元素是“内在的”和“内在的”。三角形。

标记

<p class="triangle-border">This only needs one HTML element.</p>

CSS

.triangle-border {
    position: relative;
    background: #fff;
    border: 1px solid #c2c2c2;
    width: 200px;
    padding: 15px;
    margin: 20px;
    border-radius: 3px;
    box-shadow: 0 2px 9px rgba(0, 0, 0, .3);
}
.triangle-border:before {
    content:"";
    position: absolute;
    top: -10px;
    left: 46px;
    border-width: 0 10px 10px;
    border-style: solid;
    border-color: #c2c2c2 rgba(0, 0, 0, 0);
    display: block;
    width: 0;
}
.triangle-border:after {
    content:"";
    position: absolute;
    top: -8px;
    left: 47px;
    border-width: 0 9px 9px;
    border-style: solid;
    border-color: #FFF rgba(0, 0, 0, 0);
    display: block;
    width: 0;
}

<强> FIDDLE

来源：http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

还有这样的生成器：

http://ilikepixels.co.uk/drop/bubbler/

http://cssarrowplease.com

http://html-generator.weebly.com/css-speech-bubble-generator.html

Answer 2

通常的方法是在使用border属性创建CSS形状的伪元素之前和之后添加，绝对定位它们。如果你想伪造一个边界＆＃39;在形状本身上，您使用不同的颜色创建两个重复的形状（前后元素），然后用顶部或左侧属性偏移它们。