定做异型

标签与背景图像

问题描述

我正在尝试实现一个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形状实现都需要边框或框阴影，这两个都不适用于此处。 有关如何实现这一点的任何想法？

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

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

这是一个小提琴： ： 。

HTML：

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

CSS：

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    padding: 10px;
    background-color: #eee;
}

.popup {
    box-shadow: 0 0 10px #ccc;
    height: 240px;
    width: 186px;
    position: fixed;
    top: 50px;
    background-color: #fff;
}

.popup h1 {
    font: bold 20px/3 Sans-Serif;
    color: #fff;
    padding: 0 20px;
    background: url(http://thebusstopsherefoundation.com/images/bettis_wave.jpg)
                no-repeat
                -80px -90px/600px;
}

.popup header {
    position: relative;
}

.corner-holder {
    position: absolute;
    right: 0;
    top: 0;
    height: 30px;
    width: 60px;
    overflow: hidden;
    transform: translateY(-100%);
}

.corner-holder .corner,
.corner-holder .corner:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: bottom left;
    /* webkit trick to get rid of jagged edges */
    -webkit-backface-visibility: hidden;
}

.corner-holder .corner {
    overflow: hidden;
    transform: skewX(-63.43deg);
}

.corner-holder .corner:before {
    content: "";
    background: url(http://thebusstopsherefoundation.com/images/bettis_wave.jpg)
                no-repeat
                -206px -60px/600px;
    transform: skewX(63.43deg);
}