Question

我正在设计一个公司的时间表，这个公司将有多个垂直堆叠的矩形向下，但我不知道如何修改矩形的属性，因为我真的不擅长在CSS中设计自定义形状。我能够做一个只有右边here的边框的矩形。

这是我用来绘制矩形的CSS：

#box {
    border:10px solid #000;
    border-radius: 10px 40px 40px 10px;
    width: 200px;
    height: 100px;
    background-color:#ccc;
}

到目前为止，我有一个基础，但我不知道如何设计自定义矩形，边框线上的消失部分和另一条线向下。最后，我希望它看起来像这样：

enter image description here

任何人都可以帮我设计使用CSS设计这些自定义矩形中的2个。我真的很感激，因为我可以继续使用基本的自定义矩形进行设计。谢谢你们！

Answer 1

这里我根据您放置的图片制作了一个页面。查看Demo。

span {
    font-size: 20px;
    background: #fff;
  position:absolute;
    top: -20px;
    right: 70px;
  padding:4px;
}
p{
  border-radius: 25px;
    width: 250px;
    height: 150px;
   border:10px solid #000;
    background-color:white;
  position:relative;
  padding-top:15px;
}

p:after{
 position:absolute;
 content: " ";
   width:50px;
    height:50px;
  border-right:10px solid #000;
  right:18px;
  bottom:-55px;
  }
p:last-child:after{border-right:0;}

/ HTML代码将是这样的 /

<div id="box">
<p><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p>
         <p><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p>
         <p>><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p>
 </div>

Answer 2

你需要这样的东西???

HTML

<div id="box">
    <h1>title goes here</h1>
    <p>Hello</p>
</div>

CSS

#box{
    border:10px solid #000;
    border-radius: 20px;
    width: 200px;
    height: 100px;
    background-color:#fff;
}
h1 {
    font-size: 20px;
    background: #fff;
    position: relative;
    top: -30px;
    right: -10px;
    display: inline-block;
}

demo

修改

对于你的第二个问题，你可以在不使用图像的情况下做这样的事情，

DEMO

Answer 3

这个怎么样：将一个div放在前面的其他三个后面，然后给它一个border-right属性。然后给出其他三个高于1的z索引。最后给三个框中每个框的标题一个zindex高于最后一个。另外尽量不要给盒子高度，而是填充，这样刻字永远不会溢出盒子。这是一些css（需要调整）：

   /*the container behind the boxes*/
   #cont{background-color:transparent;
         height:/*whatever height*/;
         width:/*whatever width*/;
         border-right:5px solid black;}



   #box{
        background-color:white;
        border-radius: 10px;
        position:relative;
        z-index:2;
    }

   #time{
    position:relative;
    z-index:3;
    }

这是最简单的方法...... 如果你不明白这一点，那就做一些教程吧！它会帮助你！ 有一个好人;） Work in editfy with a live preview!

在CSS中设计圆角矩形

3 个答案: