Question

一个人如何使用CSS创建以下按钮？

偏斜的事实不是问题。我不确定的部分是对角线颜色的分割，该对角线的位置从一个角到另一个角。我不确定如何定义渐变以使其能够响应所有按钮尺寸。

到目前为止，对于倾斜的按钮没有颜色的对角线差异，我有以下几点。

button.btn {
  color: white;
  background-color: red;
  padding: 10px 20px;
  line-height: 1;
  border: none;
  transform: skewX(-25deg);
  cursor: pointer;
}
button.btn span {
  display: block;
  transform: skewX(25deg);
}

<button class="btn" ><span>View Demo</span></button>

但是我敢肯定，其中很多都必须改变。

Answer 1

以下是适用于任何大小的渐变解决方案：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>my example barchart</title>
</head>
<h1>test barchart</h1>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script type="text/javascript">
// y levels
var yLevel = [0.102, 0.739, 0.851, 0.851, 1.107, 1.274, 1.205, 1.044, 1.082, 0.671, 1.322, 0.121, 7.827, 3.012, 0.912, 1.065, 0.152, 2.681 ];

//max value
var yLevelMax = d3.max(yLevel);

var inquinante = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R'];

var margin = { top: 50, right: 50, bottom: 260, left: 50 };

var graphWidth = 800, graphHeight = 500;

var totalWidth = graphWidth + margin.left + margin.right;

var totalHeight = graphHeight + margin.top + margin.bottom;

var axisPadding = 10;

var svg = d3.select('body')
            .append('svg')
            .attr({ width: totalWidth, height: totalHeight });

var mainGroup = svg
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ")");


var bands = d3.scale.ordinal()
					.domain(yLevel)
					.rangeBands([0, graphWidth], 0.05);

var yScale = d3.scale
                .linear()
                .domain([0, yLevelMax])
                .range([0, graphHeight]);

// not exactly understand this
function translator(d, i) {
        return "translate(" + bands.range()[i] + "," +  (graphHeight - yScale(d)) + ")";
            }

var barGroup = mainGroup.selectAll('g')
                .data(yLevel)
                .enter()
                .append('g')
                .attr('transform', translator);

barGroup.append('rect')
            .attr({
                 fill: 'steelblue',
                 width: bands.rangeBand(),
                 height: function(d) { return yScale(d); }
                });

barGroup.append('text')
            .text(function(d) { return d; })
            .style('text-anchor', 'start')
            .attr({
                    dx: 10,
                    dy: -10,
                    transform: 'rotate(90)',
                    fill: 'white'
            });

var leftAxisGroup = svg.append('g');
            leftAxisGroup.attr({
                transform: 'translate(' + (margin.left - axisPadding) + ',' +
                                            margin.top + ')'
            });

var yAxisScale = d3.scale
            .linear()
            .domain([yLevelMax, 0])
            .range([0, graphHeight]);

var leftAxis = d3.svg.axis()
            .orient('left')
            .scale(yAxisScale);

var leftAxisNodes = leftAxisGroup.call(leftAxis);

styleAxisNodes(leftAxisNodes);

var bottomAxisScale = d3.scale.ordinal()
                .domain(inquinante)
                .rangeBands([axisPadding, graphWidth + axisPadding]);

            var bottomAxis = d3.svg
                .axis()
                .scale(bottomAxisScale)
                .orient("bottom");

            var bottomAxisX = margin.left - axisPadding;
            var bottomAxisY = totalHeight - margin.bottom + axisPadding;

            var bottomAxisGroup = svg.append("g")
                .attr({ transform: 'translate(' + bottomAxisX + ',' + bottomAxisY + ')' });

            var bottomAxisNodes = bottomAxisGroup.call(bottomAxis);
            styleAxisNodes(bottomAxisNodes);

            bottomAxisNodes.selectAll("text")
                .style('text-anchor', 'start')
                .attr({
                    dx: 10,
                    dy: -5,
                    transform: 'rotate(90)'
                });

            function styleAxisNodes(axisNodes) {
                axisNodes.selectAll('.domain')
                    .attr({
                        fill: 'none',
                        'stroke-width': 1,
                        stroke: 'black'
                    });
                axisNodes.selectAll('.tick line')
                    .attr({
                        fill: 'none',
                        'stroke-width': 1,
                        stroke: 'black'
                    });

                }




</script>

</body>
</html>

button.btn {
  color: white;
  background:linear-gradient(to bottom right, #e80027 49%,#d20024 50%);
  padding: 10px 20px;
  line-height: 1;
  border: none;
  transform: skewX(-25deg);
  cursor: pointer;
}
button.btn span {
  display: block;
  transform: skewX(25deg);
}

Answer 2

使用 Gradient CSS generator 获取任何种类的渐变背景。

button.btn {
  color: white;
  background: rgba(248, 80, 50, 1);
  background: -moz-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(248, 80, 50, 1)), color-stop(50%, rgba(241, 111, 92, 1)), color-stop(51%, rgba(246, 41, 12, 1)), color-stop(71%, rgba(240, 47, 23, 1)), color-stop(100%, rgba(231, 56, 39, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
  background: linear-gradient(135deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1);
  padding: 10px 20px;
  line-height: 1;
  border: none;
  transform: skewX(-25deg);
  cursor: pointer;
}

button.btn span {
  display: block;
  transform: skewX(25deg);
}

<button class="btn"><span>View Demo</span></button>

Answer 3

尝试一下：

.btn{
  background-color: #34ADFF;
  background-image: -webkit-linear-gradient(-68deg, #e80027 50%, #d20024 50%);
  border:0px;
  padding:20px 25px;
  font-size:17px;
  -webkit-transform:skew(-30deg);
    -moz-transform:skew(-30deg);
    -o-transform:skew(-30deg);
    transform:skew(-30deg);
  color:#fff;
  margin-left:20px;
}

<button class="btn" ><span>View Demo</span></button>

Answer 4

button.btn {

    color: white;
    background-color: red;
    padding: 10px 20px;
    line-height: 1;
    border: none;
    transform: skewX(-25deg);
    cursor: pointer;
	background: linear-gradient(165deg, rgba(245, 80, 50, 1) 0%, rgba(245, 111, 92, 1) 50%, rgba(230, 41, 12, 1) 51%, rgba(230, 47, 23, 1) 71%, rgba(230, 56, 39, 1) 100%);
  
}
button.btn span {

    display: block;
    transform: skewX(25deg);
}

<button class="btn" ><span>View Demo</span></button>

如何使用CSS创建此按钮？

4 个答案: