Создание динамической формы в виде стрелки с помощью CSS

Question

Создание динамической формы в виде стрелки с помощью CSS

Я хотел бы создать сложную стрелкообразную форму с CSS, как это изображение:

Это текущий код:

.camera_caption {

    position: relative;

    background-color: greenyellow;

    left: 0;

    margin-top: 263px;

    width: 717px;

    /*height: 234px;*/

    padding-left: 365px;

    font: normal 14px/24px 'Roboto';

    color: #fff;



}

.camera_caption:after {

    content: "";

    background: url(../images/capture_bg2.png) 0 0 no-repeat;

    position: absolute;

    height: 234px;

    width: 119px;

    right: -119px;

    top: 0;

}

Код работает, но у меня есть динамический контент, понимание слой camera_caption который динамически меняется в зависимости от содержания.

Мне также нужно изменить правую сторону фигуры в зависимости от размера.

Как я могу реализовать тот же результат, но с чистым CSS?

677 3

html css css3 html5 css-shapes

3 ответов:

Comments

Ничего не найдено.

G-Cyr · Accepted Answer · 2016-03-06 23:07:30

Фон-градиент может быть возможность: (даже границы могут быть нарисованы)

div {
  display: table;
  /* block shrinking to size of content */
  padding: 0.25em 2em 0.25em 0.5em;
  /* give some air to content */
  background: linear-gradient(-45deg, transparent 1em, #00A2E8 1em) bottom,
  /* +bg-size to cover half bottom */
  linear-gradient(-135deg, transparent 1em, #25B1ED 1em) top;
  /*different color for the show.  +bg-size to cover half bottom */
  background-repeat: no-repeat;
  /* no-repeat please */
  background-size: 100% 50%;
  /* spray each image/gradient only on half vertical */
  
  /* font  makeup*/
  font-size: 3em;
  color: white;
  text-shadow: -1px -1px 1px black, 1px 1px gray;
}
html {
  background:tomato;
  }

.bis {
  margin-top:10px;
  background: 
    linear-gradient(to top, white, white) no-repeat
    /* border-left*/,
    linear-gradient(to left, transparent 1.45em, white 1.45em) no-repeat
    /* border-top */,
    linear-gradient(to left, transparent 1.45em, white 1.45em) no-repeat bottom
    /* border-bottom */, 
    linear-gradient(-45deg, transparent 1em, white 1em, white 1.1em, #00A2E8 1em) bottom,
    /*border top righ and background  +bg-size to cover half bottom */
  linear-gradient(-135deg, transparent 1em, white 1em, white 1.1em, #25B1ED 1em) top
  /* border-bottom right and background +different color for the show.  +bg-size to cover half bottom */
  rgba(0, 0, 0, 0.05)
  /* see where the box lays */
  ;
  background-repeat: no-repeat;
  /* no-repeat please */
  background-size: 0.08em 100%, 100% 0.075em, 100% 0.075em, 100% 50%, 100% 50%;
  /* spray each image/gradient only where shapes has to be drawn */

}
.rounded {
    border-radius:0.5em 0 0 0.5em;
  box-shadow:inset 0.08em 0 white;
  }

<div class="camera_caption">whatever is there</div>
<div class="camera_caption bis">Or  elsewhere</div>

<div class="camera_caption bis rounded">around</div>

Yasir Khan · Accepted Answer · 2016-03-04 16:25:54

Вот чистый css для приведенной выше формы, надеюсь, что это будет работать для вас.
.camera_caption{
    width: 300px;
    height: 80px;
    background: #00a2e8;
    position: relative;
}
.camera_caption:after {
    position: absolute;
    right: -40px;
    content: "";
    width: 0; 
    height: 0; 
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #00a2e8;
}
HTML-тег
<div class="camera_caption"></div>
JS Fiddle https://jsfiddle.net/wv7c03u9/

vijay · Accepted Answer · 2016-03-04 14:31:43

.arrow_box {
	position: absolute;
	background: #00A2E8;
    top:50px;
    width:200px;
    height:60px;
}
.arrow_box:after, .arrow_box:before {
	left: 10%;
	top: 0%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #00A2E8;
	border-width: 30px;
	margin-left: 180px;
    
}

<div class="arrow_box">
  </div>