css3 动态箭头-使用 CSS 创建动态箭头形状

本文介绍了使用CSS创建动态箭头形状的处理方法css3 动态箭头，对于您解决问题有一定的参考价值。 有需要的话就跟着小编一起学习吧！

问题描述

我想使用 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是动态的

代码正在工作css3 动态箭头，但我对层camera_caption有动态内容洞察力，它根据内容动态变化。

我需要根据尺寸修改形状的左侧。

我还需要根据尺寸更改形状的右侧。

如何使用纯 CSS 获得相同的结果？

如何使用纯 CSS 实现相同的结果？

推荐答案

背景渐变可能是一种可能性：=http://codepen.io/gcyrillus/pen/mPezGB=nofollow> 甚至可以绘制边框）

背景渐变可能是一种可能性：（甚至可以绘制边框）

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

whatever is there
Or  elsewhere
around

关于使用 CSS 创建动态箭头形状的文章到此结束。 希望我们推荐的答案对您有所帮助，也希望您多多支持IT之家！