自定义形状CSS3价格表

时间:2015-07-28 02:11:59

标签: html5 css3 customization shapes

我正在尝试制作一个形状像骨头的价格表。我在代码笔上找到了一些代码,但我不确定如何修改/组合它。

我在发布代码链接时遇到问题,但骨骼形状在这里:

CSS3: Bone shape

http://codepen.io/Rv-Designs/pen/fthsp

@charset "utf-8";
 * {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  background: #d5d5d5;
  font-family: trebuchet MS;
  color: #6B6B6B;
  border: 0 none;
  margin: 0;
  font-size: 13px;
  padding: 0;
}
#wrapper {
  padding: 60px 0px;
}
.container {} .row {} .circle {
  background: #ffffff;
  padding: 35px;
  text-align: center;
  height: 250px;
  width: 250px;
  border: 8px solid #F2F2F2;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  /* Firefox 4 */
  -webkit-transition: all 0.5s;
  /* Safari and Chrome */
  -o-transition: all 0.5s;
  /* Opera */
}
.circle h4 {
  margin: 0;
  padding: 0;
}
.circle p {} .circle span {} .circle span.icon {} .circle span.icon i {
  font-size: 48px;
}
.circle span.price-large {
  font-size: 68px
}
.price-small {
  font-size: 24px
}
.c1:hover {
  background: #39b3d7;
  color: #ffffff;
}
.c1 .blue {
  color: #39b3d7;
}
.c1:hover .blue {
  color: #ffffff;
}
.c2:hover {
  background: #ed9c28;
  color: #ffffff;
}
.c2 .yellow {
  color: #ed9c28;
}
.c2:hover .yellow {
  color: #ffffff;
}
.c3:hover {
  background: #47a447;
  color: #ffffff;
}
.c3 .green {
  color: #47a447;
}
.c3:hover .green {
  color: #ffffff;
}
.c4:hover {
  background: #d2322d;
  color: #ffffff;
}
.c4 .red {
  color: #d2322d;
}
.c4:hover .red {
  color: #ffffff;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<div id="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="circle c1 img-circle">
          <h4 class="blue">Basic Plan</h4>
          <span class="icon blue"><i class="fa fa-eur"></i></span>
          <span class="price-large blue">8,</span>
          <span class="price-small">90</span>
          <p>Great for small Business</p>
          <button type="button" class="btn btn-info">Choose</button>
        </div>
      </div>
      <!-- .Col-md-3 ends here -->

      <div class="col-md-3">
        <div class="circle c2 img-circle">
          <h4 class="yellow">Starter Plan</h4>
          <span class="icon yellow"><i class="fa fa-eur"></i></span>
          <span class="price-large yellow">24,</span>
          <span class="price-small">90</span>
          <p>Great for small Business</p>
          <button type="button" class="btn btn-warning">Choose</button>
        </div>
      </div>
      <!-- .Col-md-3 ends here -->

      <div class="col-md-3">
        <div class="circle c3 img-circle">
          <h4 class="green">Premier Plan</h4>
          <span class="icon green"><i class="fa fa-eur"></i></span>
          <span class="price-large green">54,</span>
          <span class="price-small">90</span>
          <p>Great for small Business</p>
          <button type="button" class="btn btn-success">Choose</button>
        </div>
      </div>
      <!-- .Col-md-3 ends here -->

      <div class="col-md-3">
        <div class="circle c4 img-circle">
          <h4 class="red">Deluxe Plan</h4>
          <span class="icon red"><i class="fa fa-eur"></i></span>
          <span class="price-large red">8,</span>
          <span class="price-small">90</span>
          <p>Great for small Business</p>
          <button type="button" class="btn btn-danger">Choose</button>
        </div>
      </div>
      <!-- .Col-md-3 ends here -->
    </div>
    <!-- .Container ends here -->
  </div>
  <!-- .Row ends here -->
</div>

这样的事情: http://s9.postimg.org/u6np6fk73/example_01.jpg

1 个答案:

答案 0 :(得分:0)

您可以尝试这样的事情:

'WSGIRequest' object has no attribute 'get'
@login_required
def add_pay_date_form(request, paymentrate_id):
    template_name = "policy/pay_date_modal_form.html"

    rate = get_object_or_404(PaymentRate, id=paymentrate_id)

    form = PayDateForm(request.POST or None, PaymentRate)

    if form.is_valid():
        form.save()
        return JsonResponse({'success': True})

    return render_to_response(template_name, {
        'form': form,
        'rate': rate
    }, context_instance=RequestContext(request))

http://codepen.io/anon/pen/ZGmOdz