Question

有人可以帮我解决我遇到的这个CSS问题吗？我想创建一个HTML调出框，箭头指向div内部。到目前为止，我看到的所有教程都有指向左，右，上或下的箭头。我正在使用此处的示例http://cssarrowplease.com/

Answer 1

旋转它并相应地改变顶部，左侧和边缘的位置

 .arrow_box:after, .arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
   -ms-transform: rotate(180deg); /* IE 9 */
   -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
   transform: rotate(180deg);
}

Answer 2

.arrow_box {
	position: relative;
	background: #88b7d5;
	border: 4px solid #c2e1f5;
    margin-top:150px;
    margin-left:150px;
    padding:15px;
    height:150px;
    width:60%;
    text-align:center;
    line-height: 100px;
}
.arrow_box:after, .arrow_box:before {
	    bottom: 100%;
    left: 50%;
    border: solid rgba(0, 0, 0, 0);
    content: " ";
    top: -4px;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    transform: rotate(180deg);
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);   
    border-bottom-color: #FFF;
    border-width: 30px;
    margin-left: -30px;
}
.arrow_box:before {
	    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

<div class="arrow_box">
            <h1 class="logo">css arrow please!</h1>
          </div>

以下是此代码的演示工作代码

<强> Demo code

Answer 3

你只需要改变：before和：after伪元素的位置：

http://jsfiddle.net/7nmtgoqo/2/

此生成器中的箭头右侧通常具有样式规则left:100%;并且：具有与div背景匹配的border-color。如果你更新left和top的值，它会移动箭头，同时保持它的形状...在小提琴中我评论了我从cssarrowplease生成的样式更新的css行。

Answer 4

我相信您可以通过这个简单的代码完成您的要求：

<style>
.outerDiv{
width:100px;
height:100px;
background:red
}

.inwardArrow{
    margin:0 auto;
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid white;
}
</style>

<div class="outerDiv">
<div class="inwardArrow"></div>
</div>

有人可以帮我解决这个问题吗？

4 个答案: