相关疑难解决方法(0)

我试图用css创建一个背景,其中一边是纯色,另一边是纹理:两个被对角线分开.我希望这是两个独立的div,因为我打算用jQuery添加一些动作,如果你点击右边,灰色三角形会变小,如果你点击左边,纹理三角形变小(就像一个幕布效果).任何建议将不胜感激.

我试图创建一个倾斜的div,在我看到的任何地方,我刚刚找到了如何使用某种类型的边框来做到这一点,这将无法工作,因为div将位于图像的顶部.

所以现在使用Bootstrap的代码如下:

<div class="thumbnail">
    <a href="#">
        <img class="img-responsive" src="banner.jpg">
        <h3 class="headline-badge">slanted div text</h3>
    </a>
</div>

这是相关的CSS:

.thumbnail img.img-responsive {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.headline-badge {
    color: #fff;
    margin-top: 0;
    padding: 2%;
    position: absolute; 
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: #000;
}

所以我想在右上角创建一个斜面.我尝试使用边框很少或没有成功,每当我试图使边框透明时它就不会显示边框.

有没有人对如何使用CSS创建这个有任何想法？我认为它也应该是响应性的,这是一个主要问题,因为倾斜不能只是一个固定的高度/宽度.

倾斜应该在45度左右,并且只在div的右侧.该文本不应受斜面影响.

效果应该类似于:

http://jsfiddle.net/webtiki/yLu1sxmj/

感谢您发布这个小提琴,但我需要实际添加文本到div,并且您的解决方案很难做到这一点,因为回复中的评论建议.倾斜也需要向上倾斜,而不是向下倾斜,我努力做到这一点而不影响div的左边.在你的例子中,我无法弄清楚如何在div上添加文本,尽管我害怕.