Question

基本上我试图从一个角度切掉一个div的背景。请参阅下面的图片以获取示例：您会注意到导航部分已被切断以及下面的标题图片。

有没有办法用CSS3创建这个效果？我试过这个：

.site-header {
    background-color: #0c3063;
    width: 960px;
    height: 300px;
    @include clearfix;
    position: relative;
    z-index: 1;

    &:after {
        content: "";
        width: 100px;
        position: absolute;
        top: -162px;
        right: -150px;
        width: 300px;
        height: 300px;
        background-color: black;
        transform: rotate(45deg);
        z-index: 2;
    }
}

在上面的示例中它重叠但我知道如何解决这个问题，基本上只是使用之前而不是之后。但是有更好的方法吗？

我的例子似乎我不能把：在其内容之前的内容之后所以这个解决方案并不理想:(任何想法？

编辑：https://jsfiddle.net/6x3yenge/1/

由于

Answer 1

虽然以下代码无法实现您想要的图像，但它确实可以完成顶层菜单的工作。使用边框创建三角形简化了很多事情。

JSfiddle链接：MsgWaitForMultipleObjects()

HTML：

body
{
    background: yellow;
}

.menu
{
    background: transparent;
    font-size: 0px;  /*In case a gap is coming between .main & .cut nested DIVs (Due to whitespace in HTML code)*/
}

.main
{
    display: inline-block;
    width: 200px;
    height: 100px;
    background: red;
}

.cut
{
    display: inline-block;
    border: 50px solid transparent;
    border-top: 50px solid red;
    border-left: 50px solid red;
}

CSS：

object SimpleSparkStreaming extends App {

val conf = new SparkConf()
val ssc = new StreamingContext(conf,Seconds(conf.getLong("spark.batch.window.size",1L)));
ssc.checkpoint("checkpoint")
val topics = Set(conf.get("spark.kafka.topic.name")); 
    val kafkaParams = Map[String, String]("metadata.broker.list" -> conf.get("spark.kafka.broker.list"))
            val kafkaStream = KafkaUtils.createDirectStream[String,String,StringDecoder,StringDecoder](ssc, kafkaParams, topics)
            kafkaStream.foreachRDD(rdd => {
                rdd.foreach(x => {
                    println(x._2)
                })

            })
    kafkaStream.print()
            ssc.start() 

            ssc.awaitTermination()

}

对角线CSS3背景颜色/图像

1 个答案: