Question

我正在尝试制作一些如下所示的箭头 arrows

我正在使用Sass和Bootstrap4，我想通过使用CSS3绘制它们来制作它们

我已经尝试过了，但是我不知道如何实现：

.line1 p{
	background-color: red;
	width: 80px;
	height: 80px;
	text-align: center;
	align-items: center;
	border-radius: 50%;
	color: #fff;
	font-size: 2rem;
}
.line1 p::before{
	content:'';
	display: block;
	color: blue;
	width: 300px;
	height: 10px;
	position: absolute;
	border: 5px solid red;
	margin: 30px 10px 0;
	z-index: -1;
	border-radius: 0 50px 50px 0;
  	background-color: red;
}
.line1 p::after{
	content:'';
	display: block;
	color: blue;
	width: 10px;
	height: 200px;
	position: absolute;
	border: 5px solid red;
	margin-left: 20px;
	z-index: -1;
  	background-color: red;
	
}

<div class="col-md-3  align-items-center mr-0">
    <div class="line1  my-auto">
        <p class="d-block my-auto">1</p>
    </div>
 </div>

Answer 1

我来自未来，你设法做到了：

.line-container{
  
  border-bottom: 5px solid red;
  border-right: 5px dashed red;
  }
 .line-container::before{
    
    content:"";
    // display:block;
    position: absolute;
    height: 20px;
    width:20px;
    border-radius:50%;
    background: red;
    bottom:-7px;
    left:0;
}
.line-container::after{
    content:"2";
    position:absolute;
    width:55px;
    height:55px;
    border-radius:50%;
    background: red;
    bottom:-25px;
    right:-7px;
    font-size:2rem;
    font-weight:700;
    color:#fff;
    text-align:center;
}
  
.line-container p::before{
  content:"➤";
  position:absolute;
  font-size:32px;
  color:red;
  right:2.6px;
  top:-30px;
  transform: rotate(270deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<div class="col-8 mt-5">
  <div class="line-container px-md-5 pt-5">
  <p class="mt-5"   >Lorem ipsum dolor sit amet,       consectetur adipisicing elit. Dicta minus  </p>
    
</div>
</div>

您只需要使用容器矩形的“线”，它们已经存在，因此您只需要放置颜色

Answer 2

我能够找到三角形here的初始CSS。基本上，您想使div的两个边界透明，并给它们指定一定的宽度，以便将div捏成一个三角形。我还添加了除了定位之外非常简单的球。

您可能需要进行进一步的调整以满足您的需求，但这应该可以帮助您开始：）

.line1 p{
	background-color: red;
	width: 80px;
	height: 80px;
	text-align: center;
	align-items: center;
	border-radius: 50%;
	color: #fff;
	font-size: 2rem;
}
.line1 p::before{
	content:'';
	display: block;
	color: blue;
	width: 300px;
	height: 10px;
	position: absolute;
	border: 5px solid red;
	margin: 30px 10px 0;
	z-index: -1;
	border-radius: 0 50px 50px 0;
  	background-color: red;
}
.line1 p::after{
	content:'';
	display: block;
	color: blue;
	width: 10px;
	height: 200px;
	position: absolute;
	border: 5px solid red;
	margin-left: 20px;
	z-index: -1;
  	background-color: red;
	
}

.arrow1{
position: absolute;
transform: rotate(180deg);
    left: 3px;
    top: 225px;
width: 0;
  height: 0;
  border-right: 28px solid transparent;
    border-bottom: 60px solid red;
    border-left: 28px solid transparent;
}
  
  .ball1{
  position: absolute;
  left: 300px;
  top: 15px;
  background-color: red;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  }

<div class="col-md-3  align-items-center mr-0" style="position: relative;">
    <div class="line1  my-auto">
        <p class="d-block my-auto">1</p>
        <div class='arrow1'></div>
        <div class='ball1'></div>
    </div>
 </div>

Answer 3

好吧，我给您一个快速的PoC，您可以轻松地扩展它，以便可以使用预制模板为实例定义其用途，但是如果您需要所有其他方向和其他东西，则必须做些额外的创意工作并自行填写空白，但这可能有助于您入门。干杯！

.magic-arrows {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--arrow-circle-height);
  width: var(--arrow-circle-width);
  background-color: var(--arrow-color);
  border-radius: 50%;
  overflow: visible;
}
.magic-arrows:before, .magic-arrows:after {
  content: '';
  display: block;
  position: absolute;
  color: var(--arrow-color);
  border: var(--arrow-color) var(--arrow-dash-size) dashed;
  overflow: visible;
  z-index: -1;
}
.magic-arrows:before {
  height: 0;
  width: calc( var(--arrow-circle-width) + var(--arrow-width) );
  left: var(--arrow-circle-width);
  top: 50%;
  transform: translateY(-50%);
}
.magic-arrows:after {
  width: 0;
  height: calc( var(--arrow-circle-width) + var(--arrow-width) );
  top: var(--arrow-circle-width);
  left: 50%;
  transform: translateX(-50%);
}
.magic-arrows .arrow-right, .magic-arrows .dot-down {
  position: absolute;
  font-size: var(--arrow-size);
  color: var(--arrow-color);
}
.magic-arrows .arrow-right {
  top: 50%;
  left: calc(var(--arrow-circle-width) + var(--arrow-width) + var(--arrow-size) + 1rem);
  transform: translateY(-55%);
}
.magic-arrows .dot-down {
  position: absolute;
  left: 50%;
  top: calc(var(--arrow-circle-width) + var(--arrow-width) + var(--arrow-size) + 1rem);
  transform: translateX(-55%) rotate(90deg);
}

<div class="magic-arrows" 
     style="--arrow-color: red;
            --arrow-circle-height: 3rem;
            --arrow-circle-width: 3rem;
            --arrow-width: 10rem;
            --arrow-dash-size: 5px;
            --arrow-size: 2rem;">
  <span>3</span>
  
  <div class="arrow-right">➤</div>
  <div class="dot-down">◉</div>
</div>

有谁知道如何用CSS绘制这些类型的箭头？

3 个答案: