html - 带有圆形和矩形的列表

标签 html css css-shapes

我尝试实现以下从 Word (SmartArt) 中获知的列表。

List with circles and rectangles

线条可以是直的。

目前这是我的解决方案:

HTML:

<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left;"class="circleInhouse"></div>
    <div style="float: left; width: 80%;">
        <p class="boxInhouse">
            Strategischer Verkauf &#x3c;<a href="strategischerVerkauf.php">Seminarthemen</a>&#x3e;
        </p>
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left;"class="circleInhouse"></div>
    <div style="float: left; width: 80%;">
        <p class="boxInhouse">
            Prozessorientierte Verkaufstechnik &#x3c;<a href="prozessorientierteVerkaufstechnik.php">Seminarthemen</a>&#x3e;
        </p>
    </div>
</div>
<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left;"class="circleInhouse"></div>
    <div style="float: left; width: 80%;">
        <p class="boxInhouse">
            Team-Selling &#x3c;<a href="teamSelling.php">Seminarthemen</a>&#x3e;
        </p>
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>

CSS:

.box{
    background: #415985;
    color: white;
    padding: 10px; 
    font-size: 12px;   

}

.circle{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 2px solid #415985;
}

.hr{
    padding: 0; 
    margin-bottom: 0; 
    margin-top: -5px;
}

内联 CSS 将外包给 CSS 文件。

但是我并不完全满意,因为线条并不完全适合圆圈,并且必须将框/矩形移动到圆圈“后面”。

如何做到这一点?我正在寻找一个干净的解决方案。

最佳答案

你可以只使用 lipseudo-elements 来做到这一点

ul{
  list-style:none;
  }
li{
  display:block;
  width:200px;
  height:70px;
  padding:20px;
  padding-left:80px;
  font-size:28px;
  color:#fff;
  background:dodgerblue;
  margin:10px 0;
  position:relative;
  }
li:after{
  position:absolute;
  content:"";
  width:100px;
  height:100px;
  background:#fff;
  border:5px solid dodgerblue;
  border-radius:50%;
  top:0px;
  left:-50px;
  }
ul:before{
  content:"";
  position:absolute;
  width:5px;
  height:500px;
  background:#fff;
  border:2px solid dodgerblue;
  }
  
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
 </ul>

这个像你问的那样有更多的曲线

ul{
  list-style:none;
  }
li{
  display:block;
  width:200px;
  height:70px;
  padding:20px;
  padding-left:80px;
  font-size:28px;
  color:#fff;
  background:dodgerblue;
  margin:10px 0;
  position:relative;
  }
li:after{
  position:absolute;
  content:"";
  width:100px;
  height:100px;
  background:#fff;
  border:5px solid dodgerblue;
  border-radius:50%;
  top:0px;
  left:-50px;
  }
ul:before{
  content:"";
  left:-30px;
  position:absolute;
  width:100px;
  border-radius:50%;
  height:550px;
  background:#fff;
  border-right:5px double dodgerblue;
  }
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
 </ul>

关于html - 带有圆形和矩形的列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32143290/

相关文章:

html - 以多边形包裹的文本

相同大小的 HTML 表格列

javascript - 如何将 2 个 OpenLayer 标记动画添加到页面? Clickevent似乎被覆盖了

javascript - jQuery mouseenter() 和 mouseleave() 无法正常工作

css - 有没有办法在 Firefox 中平滑字体图标?

css - 有没有办法创建一个带有渐变和圆 Angular 边框的按钮(或 div)?

html - 箭头向外边框

html - CSS3图片全屏

html - 为什么@media (max-device-width : 360px) affected by the @media (max-device-width: 1024px)?

javascript - 可安装的代码 Playground