需要输入 css 来设计一个 div

Question

我对 CSS 有基本的了解。 下面是我想要实现的设计。 我附上了一个我一直在努力实现这一目标的小提琴。

根据下图，我可以看到我可以有两个 div 和两个 hr 标签； 但不确定右侧的箭头和垂直线、底部的圆圈和与内部 div 重叠的灰色垂直框。

我正在设置的FIDDLE 。

<div id="main_content" >
<div id="container">
</div>

#main_content {
width: 400px;
min-height: 200px;
height: auto;
background-color: #000;
position: relative;

}

#container {
    width: 360px;
    height: 160px;
    margin:auto;
    padding: 10px;
    background-color:#555;
    top: 10%;
}

编辑1：我走了这么远：小提琴

Answer 1

试试这个，我在右边添加了箭头。 您需要或多或少相同的步骤才能将其他项目添加到 HTML 和 CSS。

 #main_content { width: 400px; min-height: 200px; height: auto; background-color: #000; position: relative; border-radius: 10px; display: flex; } #container { width: 360px; height: 160px; margin: auto; padding: 10px; background-color: #555; top: 10%; } #arrow_div { display: flex; flex-flow: column; } #arrow { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid gray; }

 <div id="main_content"> <div id="container"> </div> <div id="arrow_div"> <div id="arrow"> </div> <div id="arrow"> </div> <div id="arrow"> </div> </div> </div>

Answer 2

因此，我提供了一个解决方案，通过使用一些引用#container的绝对定位来“绘制”您的预期结果。 更容易做出响应并仅使用一个包装器的优点是：

 body { background: black; padding: 50px; } #container { position: relative; display: flex; width: 200px; height: 180px; padding: 10px; border: 4px solid #c4c4c4; color: #fff; } #arrows { position: absolute; top: -20px; right: -20px; display: flex; flex-flow: column; }.arrow { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #fff; margin-top: 2px; }.left-line { margin-left: 20px; border: 0.1px solid #c4c4c4; }.top-lines { position: absolute; top: -15px; left: -20px; width: 100%; }.top-lines.line { width: calc(100% + 20px); }.top-lines.line:nth-child(2) { margin-top: 5px; transform: translateX(-20px) }.line { border-top: 1px solid #c4c4c4; }.line.left { position: absolute; top: -20px; left: -10px; border-left: 1px solid #c4c4c4; height: 100%; }.circles { position: absolute; left: -25px; bottom: -30px; height: 50px; width: 50px; }.circle { height: 100%; width: 100%; border: 1px solid #c4c4c4; border-radius: 50%; }.circles.circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }.circles.circle:nth-child(2) { height: 70%; width: 70%; }.transparent-rect { position: absolute; height: 60%; width: 30px; bottom: 25px; left: -20px; background-color: rgba(255, 255, 255, .2) }

 <div id="container"> <p>This is inner div</p> <div class="top-lines"> <div class="line"></div> <div class="line"></div> </div> <div class="line left"></div> <div class="circles"> <div class="circle"></div> <div class="circle"></div> </div> <div id="arrows"> <div class="arrow"></div> <div class="arrow"></div> <div class="arrow"></div> </div> <div class="transparent-rect"></div> </div>

Answer 3

这里是... ;-）

简短说明

我重新设计了您的结构并添加了一个outer-styling-wrapper ，以便在样式元素上锚定 position。

现在我可以通过绝对的药水将造型移动到他们的位置。

如果您想更改 position 现在您只需更改定位值即可。 值被计算到outer-styling-wrapper顶部|右侧|底部|左侧的边缘。

结构概述：

<div id="element-wrapper">

   <div id="outer-styling-wrapper">

      <div id="content">
         Add content here
      </div>

      <!-- styling elements: absolute position relative to outer-styling-wrapper -->

      <div id="line-top1"></div>
      <div id="line-top2"></div>
      ...
      ... more see example

   </div>

</div>

准备好的样式元素

请参阅代码中的注释以使用它...
...并根据您的需要调整 CSS 中的尺寸；-)

 /********************************************** structure first --> to align styling elements on structure ***********************************************/ #element-wrapper, #element-wrapper * { -webkit-box-sizing: border-box; box-sizing: border-box; } #element-wrapper { position: relative; width: 400px; padding: 30px; background-color: #2b2b2b; border-radius: 15px; } #outer-styling-wrapper { position: relative; /* * padding values are for space arount content box to outer styling wrapper * values depends on size of arrows / circles * STYLING ANCHOR POINTS ARE * --> top-right: upper right arrow * --> bottom-left: outer circle */ padding-top: 27px; padding-right: 25px; padding-bottom: 20px; padding-left: 13.3333333333px; /* * design-elements anchored to outer-styling-wrapper * to see the edges where the elements are anchored * just activate this class border: 1px dotted red; */ } #content { height: 200px; padding: 10px; border: 4px solid #c4c4c4; color: #fff; } /**************************************************** styling second --> use structure as anchor for styling elements *****************************************************/ /*** styling arrows ***/ #arrow-wrapper { position: absolute; /* anchor element to top-right edge of outer-styling-wrapper */ top: 0; right: 0; }.arrow { width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid #fff; margin-bottom: 10px; } /*** styling lines ***/.lines { background-color: #c4c4c4; } #line-top1 { position: absolute; /* anchor points: calculate values from: top|right|left edge of outer styling box */ top: 10px; right: 27px; left: -10px; height: 1px; } #line-top2 { position: absolute; /* anchor points: calculate values from: top|right|left edge of outer styling box */ top: 20px; right: 50px; left: -20px; height: 1px; } #line-right { position: absolute; /* anchor points: calculate values from: top|bottom|left edge of outer styling box */ top: -7.5px; bottom: 42px; left: 5px; width: 1px; } /*** styling pad ***/ #styling-pad { position: absolute; /* anchor points: calculate values from: left|bottom edge of outer styling box */ left: 0px; bottom: 55px; width: 30px; height: 35%; background-color: rgba(196, 196, 196, 0.5); } /*** styling circles ***/.styling-circles { border: 1px solid #c4c4c4; border-radius: 50%; } #styling-circle-outer { position: absolute; /* anchor points: calculate values from: left|bottom edge of outer styling box */ left: 0; bottom: 0; width: 40px; height: 40px; /* center inner circle with flexbox*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #styling-circle-inner { width: 30px; height: 30px; }

 <div id="element-wrapper"> <div id="outer-styling-wrapper"> <!-- content box --> <div id="content"> This is inner CONTENT div </div><!-- #content --> <!-- styling elements --> <div id="line-top1" class="lines"></div> <div id="line-top2" class="lines"></div> <div id="line-right" class="lines"></div> <div id="arrow-wrapper"> <div class="arrow"></div> <div class="arrow"></div> <div class="arrow"></div> </div> <div id="styling-pad"></div> <div id="styling-circle-outer" class="styling-circles"> <div id="styling-circle-inner" class="styling-circles"></div> </div> </div><!-- #outer-styling--> </div><!-- #element-wrapper -->