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： 我走了这么远：Fiddle

Answer 1

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

WHERE IDProcessState IN (5, 6, 7) AND
      (IDProcessState <> 7 OR
       DtSubmission >= DATEFROMPARTS(YEAR(GETDATE()), MONTH(GETDATE()), 1) 
      )

#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;
}

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 以具有定位样式元素的锚点。

现在我可以通过绝对药剂将样式移动到它们的位置。

如果您现在想更改位置，只需更改定位值即可。值计算到 outer-styling-wrapper top|right|bottom|left 的边缘。

结构概述：

<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 -->

需要在 css 上输入来设计一个 div

3 个答案: