Question

我试图实施一个popover设计。每个popover都有一个标题，上面有动态生成的背景图像。该设计需要在标题顶部指针，但我想不出一种方法来实现它并维护背景图像。

这是当前的标记，没有指针：

        <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/

Answer 2

这是一个使用transform来完成所需角落效果的解决方案。虽然解决方案比公认的解决方案更复杂，但它可以在几乎所有现代浏览器上实现。通过使用多个transform polyfill，解决方案可以全面实施。

此解决方案背后的算法通过skewX()变换实现角点元素，该变换同样应用于图像（设置为背景）及其容器，仅在不同方向（例如-63.43deg和{ {1}}，取决于角落元素的尺寸）。然后生成的角元素与标题的背景完美对齐。

这是一个小提琴：http://jsfiddle.net/bLbt11a3/。

HTML：

63.43deg

CSS：

<div class = "popup">
    <header>
        <h1>DIY Gardener</h1>
        <div class = "corner-holder">
            <div class = "corner"></div>
        </div>
    </header>
</div>

带有背景图像的自定义形状的<div>标签

2 个答案: