定制的标签与背景图像[英]Custom-shaped tags with background images 本文翻译自  Cameron Scott  查看原文  2015-07-30  74    css/

I'm trying to implement a popover design. Each popover has a header with a dynamically generated background image on it. The design calls for a pointer at the top of the header, but I cannot think of a way to implement this and maintain the background image.

我想实现一个弹窗设计。每个弹窗都有一个标题，上面有动态生成的背景图像。设计要求在页眉顶部有一个指针，但是我想不出一种方法来实现它并维护背景图像。

Here's the current markup, sans pointer:

下面是当前的标记，无指针:

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

Every CSS shape implementation I know requires borders or box shadows, neither of which will apply here. Any idea on how to implement this?

我知道的每个CSS形状实现都需要边框或框阴影，这两个都不会在这里应用。你知道怎么实现这个吗?

2 个解决方案

#1

This can be achieved using css clip-path and using a polygon as the parameter. Here is an example:

这可以通过使用css剪切路径和使用多边形作为参数来实现。这是一个例子:

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

And the CSS

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

Browser support is limited to modern browsers though.

但是浏览器支持仅限于现代浏览器。

You can play around using this tool : http://bennettfeely.com/clippy/

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

#2

Here's a solution that uses transforms to accomplish the desired corner effect. Although the solution is more complicated than the accepted one, it can be implemented on pretty much all modern browsers. By using several of the transform polyfills, the solution can be implemented across the board.

这里有一个解决方案，它使用转换来实现所需的转角效果。尽管解决方案比公认的方案更复杂，但它几乎可以在所有现代浏览器上实现。通过使用几个转换的多填充，解决方案可以全面实现。

The algorithm behind this solution achieves a corner element via skewX() transform that is equally applied on the image (set as a background) and its container, just in different directions (e.g., -63.43deg and 63.43deg, depending on the dimensions of the corner element). Then the generated corner element is perfectly aligned with the heading's background.

这个解决方案背后的算法通过skewX()变换实现了一个角元素，这个角元素在图像(设置为背景)和它的容器上都是相同的，只是方向不同(例如-63.43deg和63.43deg，取决于角元素的尺寸)。然后生成的角元素与标题的背景完美对齐。

Here's a fiddle: http://jsfiddle.net/bLbt11a3/.

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

HTML:

HTML:

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

CSS:

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);
}