Создать стрелку с линией в CSS - PullRequest
Новая
       1

Создать стрелку с линией в CSS

0 голосов
/ 09 декабря 2018

Я пытаюсь создать рабочий процесс, для которого мне нужна стрелка между шагами.Я создал линию между шагами, используя псевдоэлемент: after на шаге div, но не знаю, как поместить наконечник стрелки в конец строки.Я написал следующий код до сих пор. 

.step-items {
    display: flex;
    flex-flow: row nowrap;
    position: relative;
    justify-content: center;
}

.steps {
    margin: 1em;
    border-radius: 10%;
    height: 5em;
    padding: 1rem;
    width: 7rem;
    height: 4rem;
    position: relative;
    color: #fff;
    background: linear-gradient(45deg, #00abff, #45e5c3);
}

.steps:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 22%;
    top: 2em;
    left: -2em;
    color: #00abff;
    background-color: #00abff;
}

.steps:first-child::after {
    content: none;
    display: none;
}
<div class="step-items">
  <div class="steps">
    Item 1
  </div>

  <div class="steps">
    Item 2
  </div>
</div>

переход к текущему коду

Ответы [ 3 ]

0 голосов
/ 09 декабря 2018

Я попытался добавить простую стрелку, используя атрибут содержимого, но он не совсем выровнен.Надеюсь, это поможет. 

.steps:after {
  content: ">";
  position: absolute;
  text-align: right;
  line-height: 2px;
  height: 2px;
  width: 22%;
  top: 2em;
  left: -2em;
  color: #00abff;
  background-color: #00abff;
}
0 голосов
/ 09 декабря 2018

Я добавил 

.steps:first-child::before {
    content: '▶︎';
    position: relative;
    display: block;
    left: calc(100% + 36px);
    color: #00abff;
    top: 8px;
}

к вашему css.Я думаю, что он должен делать то, что вы пытаетесь сделать.

Ссылка на отредактированную скрипку: https://jsfiddle.net/z157kfor/4.

Предложения по улучшению вашего текущего кода:

  • Вместо того, чтобы устанавливать ::after на .steps и затем скрывать ::after на первом дочернем элементе, добавьте ::after к :nth-child(2).

  • Я думаю, что этоболее интуитивно понятно добавить тело стрелки и ее наконечник в качестве псевдоэлементов на один и тот же элемент (в идеале первый, поскольку стрелки обычно рисуются от начала координат до пункта назначения).

0 голосов
/ 09 декабря 2018 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Line arrow</title>
<style type="text/css">
.box {
    width: auto;
    height: 400px;
    margin: 4em 20px;
    border: 1px dashed;
    position: relative;
}

.line-arrow {
    position: absolute;
    overflow: hidden;
    display: inline-block;
    font-size: 12px; /*set the size for arrow*/
    width: 4em;
	  height: 4em;
    margin-top: -2em;
    top: 50%;
}

.line-arrow.left {
    border-top: 1px solid #a9a9a9;
	  border-left: 1px solid #a9a9a9;
    transform: rotate(-54deg) skew(-20deg);
    left: 20px;
}

.line-arrow.right {
  	border-top: 1px solid #a9a9a9;
	  border-right: 1px solid #a9a9a9;
    transform: rotate(54deg) skew(20deg);
    right: 20px;
}

.line-arrow:active,
.line-arrow.active {
    border-width: 2px;
}

.square {
  top: auto;
  bottom: 10px;
}

.square.left {
  transform: rotate(-45deg);
}

.square.right {
  transform: rotate(45deg);
}

</style>
</head>

<body>
<div class="box">
    <a class="line-arrow left active" href="javascript:;"></a>
  <p style="background-color:red"><marquee behaviour="scroll" onmouseover="this. stop()" onmouseout="this. start()" >Md Rakibul hasan</marquee></p>
    <a class="line-arrow right" href="javascript:;"></a>
      <a class="line-arrow square left" href="javascript:;"></a>
      <a class="line-arrow square right" href="javascript:;"></a>
</div>
</body>

</html>

Попробуйте это .................

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...