相关疑难解决方法(0)

CSS三角形自定义边框颜色

尝试为我的css三角形(边框)使用自定义十六进制颜色.但是,由于它使用边框属性,我不确定如何去做.我想简单地因为兼容性而避开javascript和css3.我试图让三角形有一个带有1px边框的白色背景(围绕三角形的边角),颜色为#CAD5E0.这可能吗?这是我到目前为止所拥有的:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 100%;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #CAD5E0;
    border-style: solid;
    border-width: 10px;
}?
Run Code Online (Sandbox Code Playgroud)

我的小提琴:http://jsfiddle.net/4ZeCz/

css border css-shapes

107
推荐指数
2
解决办法
13万
查看次数

透明箭头/三角形缩进

我想在图像上做一个透明的箭头.此三角形应缩进半透明块并显示背景图像.

期望的输出:

透明的缩进CSS三角形

.barShow {
  background-color: #000;
  opacity: 0.5;
}

.barShow:before {
  top: 0%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-top-color: #999;
  border-width: 20px;
  margin-left: -20px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="barShow"></div>
Run Code Online (Sandbox Code Playgroud)

透明CSS箭应该是没有颜色的透明.

css svg css3 css-shapes

46
推荐指数
2
解决办法
4万
查看次数

标签 统计

css ×2

css-shapes ×2

border ×1

css3 ×1

svg ×1