Question

我正在尝试创建一个div来与表单输入的底角对齐，但是三角形箭头指向角落并合并到框中。由于我不是设计师，因此我遇到了问题。基本上我正在寻找的是一种与盒子融合的箭头（可能就像一个讲话泡泡）

到目前为止的代码：

HTML：

<div class="inputwrap">
     <select id="gb_contact" name="gb_contact" class="dropdown-input" >
            <option value="option">option</option>  
    </select>

    <div class="tip">rrrrrrrrrrr</div>
</div>

CSS

.inputwrap{
    position: relative;
    display: inline-block;
    min-width: 10%;
}

.tip:before {
    position: absolute;
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 0;
    border-color: #00FF00 transparent transparent transparent;
    z-index: 100;
    left: -0px;
    top: -2px;
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
    transform: rotate(5deg);

}

.tip {
    position: absolute;
    right: -190px;
    background-color:#ff0000;
    min-width:200px;
    min-height: 50px;
    margin-top:2px;
    border-radius:5px;
}

任何人都可以帮忙吗？

jsfiddle：http://jsfiddle.net/d30top88/

链接到概念：

https://drive.google.com/file/d/0B9ZIIks7bG2QT2haMWZZcXM3ZWc/edit?usp=sharing

足够接近我想：

http://jsfiddle.net/d30top88/4/

Answer 1

在盒子里合并是什么意思？只是调整了你的小提琴：

Arrow Demo

进行一些调整：

top: 12px;
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
transform: rotate(135deg);

因此，箭头现在指向div中的右侧和下方。

在提供图片链接后更新：

Arrow Demo 2

但根据图像，箭头可能没有合适的形状来满足您的要求。网上有一些不错的CSS箭头生成器，只是谷歌的“css箭头生成器”，因为我不想推广一个特殊的。

css表单输入角框

1 个答案: