Question

这是我想要达到的效果： Example

我知道如何制作三角形，我的问题是正在盒子的内部创建。如果将“ left”（左）设置为100％，则该框将消失在框的右侧后面，而不是移到下一个框的外面。

这是我正在尝试使用的Pen，可以使其正常工作： My Code

HTML：

<div class="square title">
<div class="content">
    <div class="table">
        <div class="table-cell ">
            <ul>This demo shows you can center multiple types of content :
                <li>Text</li>
                <li>Images</li>
                <li>Lists</li>
                <li>... (you can also do it with forms)</li>
            </ul>
        </div>
    </div>
 </div>
</div>

<div class="square">
 <div class="content">
     <div class="table">
         <div class="table-cell ">
           <p>Hello World!</p>
         </div>
     </div>
 </div>
</div>

CSS：

    body {
     font-family: sans-serif;
     color: #fff;
     font-size: 20px;
     text-align: center;
    }

    .square {
     float:left;
     position: relative;
     width: 33%;
     padding-bottom : 33%; /* = width for a 1:1 aspect ratio */
    /*     margin:1.66%; */
     background-color:#1E1E1E;
     overflow:hidden;
    /*     border: solid 1px red; */
    margin: 5px;
}

.content {
    position:absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;

}
.table{
    display:table;
    width:100%;
    height:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
}
/*  For list */
ul{
    text-align:left;
    margin:5% 0 0;
    padding:0;
    list-style-position:inside;
}
li{
    margin: 0 0 0 5%;
    padding:0;
}

.title::after {
  content: "";
  position: absolute;
  width: 0; 
  height: 0; 
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid green;
  left: 95%;
/*   top: 45%; */
/*   z-index: 999; */
}

我尝试在正方形周围制作一个新的div并将其设置为具有三角形，但是即使没有为左侧或右侧设置任何内容，它也使三角形一直移到屏幕的右侧。

我也尝试过z-index，但是也没有任何作用。

Answer 1

您只需背景即可轻松实现：

.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  background: grey;
}

.box:last-child {
  background:
    linear-gradient(to top right,grey 49.8%,transparent 50%) 0 calc(50% - 15px),
    linear-gradient(to bottom right,grey 49.8%,transparent 50%) 0 calc(50% + 15px),
    #000;
  background-size:30px 30px;
  background-repeat:no-repeat;
}

<div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

获取三角形以显示在div之外，并在其旁边的div上方浮动

1 个答案: