javascript - 带有背景图片的自定义形状 标签

Question

我正在尝试实现弹出窗口设计。每个弹出框都有一个带有动态生成的背景图像的标题。该设计要求在标题顶部有一个指针，但我想不出一种方法来实现它并维护背景图像。

这是当前标记，没有指针:

        <div class="popup">
            <header class="popup-header" style="background-image: url(http://thebusstopsherefoundation.com/images/bettis_wave.jpg);">
                <h1>
                    <a class="resourceName" href="" target="_blank"></a>
                </h1>
                <div class="overlay"></div>
            </header>
            <main class="popup-body">
                <section class="details">
                    <div class="resourceDescription">
                        <p></p>
                    </div><!-- /resource-description-->
                    <div class="attributes">
                    </div><!-- attronites-->
                </section><!-- / details-->
                <section class="organization">
                    <h3>Organization Information</h3>
                    <h2 class="orgName">
                        <a href="" target="_blank"></a>
                    </h2>
                    <div class="orgDescription">
                    </div><!-- /orgdescription-->
                </section><!-- /organization-->
            </main>
            <section class="cta">
                <a class="btn" href="" target="_blank">Participate</a>
            </section><!-- cta-->
        </div><!--popup-->

我知道的每个 CSS 形状实现都需要边框或框阴影，这两者都不适用于此处。关于如何实现这个的任何想法？

Answer 1

这可以使用 css clip-path 并使用多边形作为参数来实现。这是一个例子:

<div class="dialog"></div>

和 CSS

.dialog{
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: 500px;
  height: 200px;
  background-color: #d3d0c9;
  background-image: url(http://lorempixel.com/400/200/sports/1/Dummy-Text/);
  background-size: cover;
  background-position: center center;
  -webkit-clip-path: polygon(0% 25%, 85% 25%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 25%, 85% 25%, 100% 0%, 100% 100%, 0% 100%);
}

<div class="dialog"></div>

浏览器支持仅限于 modern browsers虽然。

您可以使用这个工具:http://bennettfeely.com/clippy/